HOME arrow CURRENT JOBS arrow HART Technologies - Web site (home page)
HART Technologies - Web site (home page) PDF Print E-mail

For the overall look and feel for the sub pages, we've removed the "self promo" area so that the content of the pages would then take center stage.  The height of the content box has been raised slightly in order to encompass the breadcrumbs which appear just below the main navigation.

In the interest of time, we've shown the same content displayed from the home layout.  We would of course use imagery throughout the sub pages as needed.  Also, the modules in the right column can be changed through NEATO.  Polls can be created, search fields, sidebar callouts of products.  ...there are many, many different options available which can be implemented through NEATO. 

Generally we will create two sub page templates, a two column layout and a single column layout.  The image below displays the two column layout.  The single column layout is useful for when visitors perform search queries, or for feedback forms, etc...

sub1-a.jpg        

We've made additional changes/modifications per request.  We feel that the gold used for the off-states of the buttons seems reversed.  In the second screenshot we're showing the gold color being used as the on-state for the navigation.

home3-a.jpg home3-b.jpg      

Five additional variations on the home page have been created using different color themes based off of the existing brand identity.  One possible idea is to change the background color according to what section the user is in, similar to how background colors are handled within the Studio4Squared Web site.

home2-a.jpg home2-b.jpg home2-c.jpg
home2-d.jpg home2-e.jpg  home2-f.jpg

Studio4Squared has successfully updated the look and feel for the HART Technologies home page layout while remaining true to the core brand identity by incorporating using existing elements from previous collateral items.

The the header bar and the "on state" for the main navigation, we've incorporated the same metallic surface used for the HART Technologies software icons.  In this instance we've used taken the yellow icon and slightly modified it to appear more gold.  The various greens seen throughout the layout were sampled directly from previous HART Technology collateral.

Underneath the main navigation is the "self promo".  Below you will find three home page layouts.  They are all exactly the same layout, showing you different images which would transition from one to the next within the self promo area.  These images are dynamically loaded and controllable through NEATO's main interface.

Directly under the self promo is the area to be used for breadcrumbs.  In this case since we are only looking at the home page we're only seeing the inactive state for "HOME".  After clicking on a link in the main navigation, users will see "HOME" as an active link followed by an inactive link of the page they are currently on.  These breadcrumbs are dynamically generated through NEATO.

The main content area of the home page is divided up into two columns.  On the left column we are showing what the welcoming text would look like.  Users can click on the small print icon which will display the exact same article in a print friendly format.  Clicking on the eMail icon will automatically open the users default eMail application.

In the right column are where "modules" can be positioned.  In this case we are displaying two modules on the home page, "Latest News" and "Login".  Additional articles can appear on the home page if needed and the layout will expand and contract vertically according to the amount of information being displayed on the page.

Below the main content area is a duplicate of the main navigation in text only form along with a copyright notice.  This navigational area is handy for pages with a lot of information, the user does not have to scroll back to the top of the page to access another area of the site and can simply click on one of the links at the bottom.

home1_a.jpg home1_b.jpg home1_c.jpg    



  Comments (6)
 1 Written by Patrick Chesnut, on 07-03-2008 13:14
Jon, 
 
Main and sub page formats are approved.
 2 Written by Patrick Chesnut, on 07-03-2008 12:47
Looks good. 
 
Is the standard page width 768 pixels?
 3 Written by Patrick Chesnut, on 07-03-2008 12:45
Looks fine; what is the native width (pixels) of the web page? 768?
 4 Written by Patrick Chesnut, on 07-03-2008 11:23
Jon, 
 
Option 1 (green on buttons) looks great. Thanks!  
Pat
 5 Written by Patrick Chesnut, on 06-03-2008 20:37
I like the overall loks of the options provided. We all prefer option 2 and would like to see it with the following: 
 
1) Replace green background surrounding the top green graphic with gray. 
 
2) Top graphic - can you shift the hart logo to the left and add the "Moving Concepts to Reality" to the graphics on the lower right? 
 
3) Buttons - like the gold on grey text when inactive; can you make the text green when active; no green button effect? 
 
4) Can you reduce the height of the button area to the same height as the grey area below the promo graphics? 
 
Thanks! 
 
PC
 6 Written by Patrick Chesnut, on 05-03-2008 16:41
Gold tone at top is overwhelming; can you reproduce something based off of our current banner?  
 
Gold sides are too bright; can you either fade from one color to another or use a consistent color around border frame. 
 
Gold at bottom look nice. 
 
Buttons can be streamlined to simpler format; similar to the format you use on your site. 
 
Are the graphics (vehicles, Verify, icons) designed to rotate similar to the section on the S4 main page?

Only registered users can write comments.
Please login.

 
 
© copyright 1999 - 2007 Studio4Squared - 107 C Executive Drive, Dulles VA 20166