Marcus Tam Real Estate Web Experience
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>Marcus</strong> <strong>Tam</strong> <strong>Real</strong> <strong>Estate</strong><br />
<strong>Web</strong> <strong>Experience</strong><br />
UPDATED NOV. 13, 2014<br />
CLIENT <strong>Marcus</strong> <strong>Tam</strong><br />
The information provided herein are subject to change without notice. Please refer to<br />
the source file for the latest update.
Table Of Contents<br />
Sitemap P1<br />
ChI. UI Spec P2<br />
CHII. Wireframes/UES P15<br />
Responsive view P24
Sitemap<br />
UI UX at a glance<br />
Home Page (1)<br />
Headers, Language option, Horizontal<br />
Nav, Imagery slideshow, (3-4), Service<br />
summery, Partner association, Footer<br />
Service Page ( 3 )<br />
Vertical Navigation, service contents,<br />
Property Listing<br />
Imagery gallery, Filter ( optional);<br />
Search (Optional)<br />
About Page (1)<br />
About, Contact form.<br />
4
Ch I UI Spec
Home Page UI Specifications – Grid<br />
40px<br />
Max height: 82px<br />
Universal grid system<br />
Horizontal rule<br />
Horizontal rule<br />
40px<br />
40px<br />
Max height: 48px<br />
Max width for contents: 1200 px<br />
Max-width for banner: 1280px<br />
Banner: width100% , max1280px<br />
Max height: 325px<br />
Horizontal rule:<br />
Width: 3pt<br />
Color: # f1f1f1<br />
Background Color: # f1f1f1<br />
Content Area: width100% , max1200px<br />
1/2 1/2<br />
40px<br />
80px<br />
40px<br />
Horizontal rule<br />
Width100% , Max 1200px<br />
40px<br />
40px<br />
Horizontal rule<br />
40px<br />
40px<br />
Height: 120px<br />
Background color<br />
6
Home Page UI Specifications – Flex space<br />
Adjust the Flex Space between title description<br />
and other page elements as needed.<br />
Depending on the amount of contents<br />
55px<br />
36px<br />
36px<br />
100px<br />
100px<br />
36px<br />
36px<br />
36px<br />
36px<br />
7
Home Page UI Specifications – Font<br />
Navigation link<br />
Language link<br />
Service main title<br />
Service sub title<br />
Service subtitle 2<br />
Service body<br />
Service body links<br />
Navigation link<br />
Font: ITC Franklin Gothic Std Medium<br />
Font Style: Condensed<br />
Size: 21pt<br />
Color: #213552<br />
Hover: #bc2133<br />
Stroke: Bottom, 2px.<br />
Clicked: #bc2133<br />
Stroke: Bottom, 2px.<br />
Language link<br />
Font: Hiragino Sans GB<br />
Font-size: 18pt<br />
Color: #bc2133<br />
Hover: underline<br />
Service Title<br />
Font: ITC Franklin Gothic Std<br />
Weight: Demi<br />
Size: 32 pt<br />
Color: #213552<br />
Service sub title<br />
Font: ITC Franklin Gothic Std<br />
Weight: Demi<br />
Font-size: 28 pt<br />
Line-height: 28pt<br />
Color: #213552<br />
Service sub title 2<br />
Font: ITC Franklin Gothic Std<br />
Weight: Demi<br />
Style: Italic<br />
Size: 21 pt<br />
Color: #213552<br />
8<br />
Service body text<br />
Font: ITC Franklin Gothic Std<br />
Style: Regular<br />
Font-size: 28 pt<br />
Line-height: 22pt<br />
Color: #213552
Service body link<br />
Font: ITC Franklin Gothic Std<br />
Font-size: 18pt<br />
Weight: Demi<br />
Style: Italic<br />
Color: #bc2133<br />
Footer quick links<br />
Footer text<br />
Footer quick links<br />
Font: ITC Franklin Gothic Std<br />
Font-size: 14pt<br />
Line-height: 28px<br />
Letter-spacing: 1px<br />
Color: # 929497<br />
Hover: #213552<br />
Visited: # 929497<br />
Footer text<br />
Font: ITC Franklin Gothic Std<br />
Font-size: 14pt<br />
Line-height: 28px<br />
Letter-spacing: 1px<br />
Color: # 929497<br />
9
Home Page UI Specifications – Graphical Assets<br />
Company Logo<br />
Size: Max height: 30px<br />
Source: Sync > source > logo_company.png<br />
<strong>Real</strong>tor Logo<br />
Size: Height 100%<br />
Source: Sync > source > logo_realtor_header.png<br />
Banner<br />
Size: 1280 x 350px<br />
Source: Sync > Source > banner_ad1.png<br />
Source: Sync > Source > banner_ad2.png<br />
Source: Sync > Source > banner_ad3.png<br />
Source: Sync > Source > banner_ad4.png<br />
Service Icons<br />
Size: 50 x 50 px<br />
Source: Sync > Source > icon_service1.png<br />
Source: Sync > Source > icon_service2.png<br />
Source: Sync > Source > icon_service3.png<br />
Source: Sync > Source > icon_service4.png<br />
Partner & Association logos<br />
Size: height: 80px<br />
Source: Sync > Source > logo_partner1.png<br />
Source: Sync > Source > logo_partner2.png<br />
Source: Sync > Source > logo_partner3.png<br />
Source: Sync > Source >logo_partner4.png<br />
Footer logo<br />
Size: height: 50 x 100 px<br />
Source: Sync > Source > logo_realtor_footer.png<br />
10
Service Page UI Specifications<br />
Banner: width100% , max 1280px<br />
Max height: 300px<br />
Width: max 960px<br />
max 250<br />
max 670<br />
11
Contact Page UI Specifications<br />
Width: max 1280px<br />
Width: max1200px<br />
1/2 1/2<br />
12
Ch II UX<br />
13
Home Page<br />
1<br />
2<br />
3<br />
1. Header<br />
Contain logo<br />
2. Primary Navigation (bar)<br />
Home, Services, Property List, Community,<br />
Contact. <br />
<br />
3. Banner slide show<br />
Four imageries in loop.<br />
4. Contents area 1<br />
Click detail link will direct visitor to the<br />
specific service page.<br />
4<br />
5. Contents area 2<br />
Logos aren’t clickable<br />
6. Footer<br />
Each footer link will direct visitor to the<br />
specific page.<br />
5<br />
6<br />
14
Service page > Buying<br />
1. Service page banner<br />
One fixed imagery<br />
2. Service page navigation<br />
(Secondary)<br />
Service link with sub list. When visitor<br />
click them, the navigation will expand<br />
and show contents on the right.<br />
1<br />
3. A bread scrum navigation<br />
4. Service contents<br />
Contain text and tables.<br />
2 3<br />
4<br />
15
Service page > Selling<br />
Another service page example<br />
16
Property listing page – MLS<br />
DMLS iframe<br />
With basic filtering function. Please<br />
stylize the UI to be the Custom version.<br />
17
Property listing page – Costom<br />
1. A simple filter<br />
By All, available, sold, investment type.<br />
Development type.<br />
2. Property photos and highlights.<br />
Work as a photo gallery.<br />
18
Property listing page<br />
1. Single property view<br />
When click a property. A lightbox will<br />
pop up to show more detail. Which include<br />
a photo and some property information.<br />
2. Previous & Next button<br />
Go to previous property or next.<br />
19
Community page<br />
1. Chosen Wordpress theme<br />
Only the Community page will be held<br />
in wordpress. Others pages will still be<br />
Stand Alone HTML pages.<br />
Please keep the main frame of the UI<br />
– header, navigation the same. Try to<br />
keep them consistent when visitors go<br />
to different pages using the navigation.<br />
20
About and Contact Page<br />
1. About<br />
Scroll to view the bottom text.<br />
2. Inquiry & contact form<br />
21
22<br />
Responsive View
Supported Responsive view<br />
Desktop 1920 x 1080<br />
Laptop 960<br />
Tablet 540<br />
Mobile. 480<br />
Supported browser:<br />
Google Chrome,<br />
IE 8-11,<br />
Safari,<br />
Firefox.
Thank you.
Change language