Page 1

frontdoor.com

style guide version 1.0

POWERED BY HGT V


Frontdoor.com Style Guide: Grids


Frontdoor.com Style Guide: Grids home page

Header 988px by 86px

The homepage employs a 2-column grid with a feature area spanning both columns. The page width is 988 pixels total; column 1 is 621 pixels wide and column 2 is 425 pixels wide. All columns are separated with a 10 pixel margin and are indented 10 pixels from either edge.

Search, DL and Video 968px by 270px

Home Page Column 1 622px

Homepage Column 2 336px

The header at the top of the page is 988 pixels by 86 pixels. The feature area, including the DL and the Video player is 968 pixels by 270 pixels. All other columns vary in height depending on which modules are placed on the page. The page footer is 988 pixels by 142 pixels and anchors all pages of the site.

Footer 988px by 142px

3


Frontdoor.com Style Guide: Grids secondary pages

header 988px by 84px

breadcrupmbs, subpage title, search bar 968px by 140px

Column 1 156px

Column 2 450px

Column 3 336px

Some secondary pages employ a 3-column grid with a feature area spanning both columns. Column 1 is 156px wide, column 2 is 450 pixels wide and column 3 is 336px wide. The header at the top of the page is 988px by 84px. It is followed by a secondary page header that is 988px by 140px. this page header describes the name of the section you are on, shows you the breadcrumbs, and includes a global search module. Column 3 always overlaps the secondary page header starting 10px below the main header and extending to the bottom of the page. The page footer is 988 pixels by 142 pixels and anchors all pages of the site.

Footer 988px by 142px

4


Frontdoor.com Style Guide: Colors


Frontdoor.com Style Guide: Colors primary colors page background

content area background

#737069

#FFFFAFF

search box outline

selected tabs

#FFFFFF

#A41D21

footer background

logo lockup

unselected tabs vertical gradient

#A41D21

#5C5C5C

global navigation background

#F0F9F9

buttons

secondary neutral

vertical gradient

outlines and dividers

#EA6B24

primary module background

top swoosh

#FFFFFF

#FFECD3

vertical gradient

vertical gradient

#FF8221

bottom swoosh

#F9F2E5

#FFFFFF

#D9D9D1

text

#828271

community module background

middle swoosh

#FFFFFF

links

#4A8DBB

followed links

#586269

bottom swoosh module background

horizontal gradient

#C30005

#F5F5F4

#A41D21

#FFFFFF

#C30005

#D1D2D4

#FF8221

#E4E5F1

6


Frontdoor.com Style Guide: Colors section colors buy section gradient

#FFEDD5

broker/agent section gradient

#FFFFFF

#FFFFFF

my frontdoor section gradient

sell section gradient

#DBEAF1

TBA

#FFFFFF

TBA

#FFFFFF

move section gradient

TBA

#FFFFFF

home finance section gradient

#DFF0DD

#FFFFFF

tools section gradient

#DFE1EF

#FFFFFF

neighborhood section gradient

#F5EBB7

#FFFFFF

7


Frontdoor.com Style Guide: Typography


Frontdoor.com Style Guide: Typography

system text

key colors:

#EA6923

#828271

#A41D21

#4A8DBB

Main links are Arial Regular, size: 12pt, leading: 20pt, kearning: 0pt, color: #4A8DBB A list of links appear with a graphic bug, color #EA6923 Breadcrumbs links are Arial Regular, size 10pt, leading: 0pt, kearning: 0pt, color: #4A8DBB Links as part of content summary are Arial Regular 11pt

Rollover links are Arial Regular, size: 12pt, leading: 20pt, kearning: 0pt, color: #4A8DBB, underlined Visited links are #586269 Standard Summary text for modules is Arial Regular, size:12pt, leading: 16pt, kearning: 0pt, color: #828271

Article text is Arial Regular, size: 12pt, leading: 15pt, kerning: 0, color: #828271 Article header is Arial Regular, size: 17pt, leading: 19pt, kerning: 0pt, color: #4A8DBB, Article Byline is Arial Regular, size: 10pt, leading: 0pt, kerning: 0, color: #828271 Article subheader is Arial Bold, size: 12pt, leading: 0pt, kerning: 0pt, color: #828271

Article caption is Arial Regular, size: 9, leading: 0pt, kerning: 0pt, color #828271 “More� link in modules is Arial Regular, size: 10pt, leading: 0pt, kerning: 0pt, color: #4A8DBB, case: all upper

9


Frontdoor.com Style Guide: Typography

graphic text personolized header toolbar

page title

font face: Din Schriften, size: 11pt, kerning: 43pt, case: all upper, color: #828271

font face: Din Schriften, size: 15pt, kerning: 0pt, case: all upper, color: #A41D21

dynamic lead tabs unselected tab: font face: Din Schriften, size: 11pt, kerning: 63pt, case: all upper, color: #828271

selected tab: font face: Din Schriften, size: 11pt, kerning: 63pt, case: all upper, color: #A41D21

module titles

font face: Serifa, size: 20pt, kerning: 0pt, case: all lower, color: #A41D21

numbers for top 10 modules

font face: Serifa, size: 25pt, kerning: 63pt, color: #EA6923

10


Frontdoor.com Style Guide: Global Page Elements


Frontdoor.com Style Guide: Global Page Elements global header and navigation 254

85

23

83

70

23

450

10 84 111

27

25

67

44

23

44

31

44

34

44

95

44

40

44

100

44

98

44

98

25

988 32

179

42

45

10 10 1

75

594

10 54

8 10 9

46

global header banner location 10

90

10

12


Frontdoor.com Style Guide: Global Page Elements global header with secondary page header 10

50

464

507

62

346

10 9 12 11 6 15

4

28

137

35 15

10 10

170

4

109 433

346

349 7

92

5

85

10

global footer

31 14

33

12

964

12

13


Frontdoor.com Style Guide: Global Page Elements

global menu item states

state: 1 - this state of the global menu is common to pages that do not have a section assigned to them (example: search results page)

state 2 - this state of the global menu is common to pages that have a section assigned to them (homepage, buy, sell, move, home finance, etc...)

state 3 - this appearance shows a rollover action for the “home finance“ section

14


Frontdoor.com Style Guide: Images and Graphics


Frontdoor.com Style Guide: Global Page Elements advertising units

web standard ad units

network wide units

house made units

leaderboard 728px by 90px

rectangle

large rectange

sponsor logo

300px by 250px

336px by 280

88px by 31px

broker logo 88px by 31px

network wide unit #1 207px by 93px

network wide unit #2 234px by 60px homepage only

homepage only

16


Frontdoor.com Style Guide: Images and Graphics image specifications standard video

medium size image

320px by 240px

160px by 110px

M

S

XS extra small size image

small size image

32px by 32px

89px by 61px

large image 422px by 290px

L extra large image 600px by 413px

XL

subpage dynamic lead image 484px by 240px

17


Frontdoor.com Style Guide: Images and Graphics button styles There are two types of graphical buttons on frontdoor.com. The large size button is only used in the global search module, all other buttons on the site are the smaller size. large button 15

254

15

height: 41px width: 92px type face: DIN Schrift, size: 16pt, kerning: 50, color: white with dropshadow, case: all upper verticle gradient: #F18631 to #EA6B24 border: 3px white border + outer glow usage: global search module only

14 14

small button 15

15

height: 32px width: variable depending on the amount of type inside type face: DIN Schrift, size: 14pt, kerning: 50, color: white with dropshadow, case: all upper verticle gradient: #F18631 to #EA6B24 border: 3px white border + outer glow usage: thoughout the site

11 10

links with arrows certain links on the site have a small graphical arrow next to them, suggesting more information/functionality is available upon clicking height of the arrow graphic: 7px width of the arrow graphic: 7px location of the arrow graphic: 4px away from the last letter

carousel navigation buttons 25 25

9

25

9

25

carousel type modules are controlled by previous and next arrows, as well as itunes type dots for advancing to the next or previous set of content.

11

18


Frontdoor.com Style Guide: Images and Graphics button styles video & photo buttons are identifiers of content type; they usually follow a standard link anywhere on the site. video stands for motion video content and photo stands for photo gallery content alternative video and photo icons, used in a similar fashion but in places with less real estate standard drop down box features rounded corners; inside gradient; dotted line-separator and orange arrow standard form field box features a grey border and inside gradient

standard share or grab it button is resident to all tool modules

standard popularity/rating tool standard rss feed identifier

standard map marker for larger maps with multiple points of interest

map marker for maps with single point of interest

standard icon identifiers for article page tools

large and small icons represent tools and calculator applications

19


Frontdoor.com Style Guide: Images and Graphics tabs The website utilizes tabs for many of its modules. There are two types of tabs, large and small.

large tabs 7

small tabs 170

7 4

7

109

7

4

7

7 25 7

28 7

97

4

97

4

97

7 24 7

selected tab: font face: serifa font size: 18pt kerning: -25 case: all lower font color: #A41D21 background: #FFFFFF 1px outline: #D9D9D1

selected tab: font face: din shrift 1451 Mittelshrift font size: 14pt kerning: 0 case: all lower font color: #A41D21 background: #FFFFFF 1px outline: #D9D9D1

unselected tab: font face: din shrift 1451 Mittelshrift font size: 14pt kerning: 0 case: all lower font color: #EA6923 background: vertical gradient #F0F9F9 to #FFFFFF 1px outline: #D9D9D1

unselected tab: font face: din shrift 1451 Mittelshrift font size: 14pt kerning: 0 case: all lower font color: #EA6923 background: vertical gradient #F0F9F9 to #FFFFFF 1px outline: #D9D9D1

20


frontdoor styleguide  

style guide for frontdoor.com website

Advertisement
Read more
Read more
Similar to
Popular now
Just for you