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...
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.
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.
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.
Comments (6)
Only registered users can write comments. Please login.