Harbor
Shores Life

A centerpiece for Harbor Shore’s core businesses and customers.

Harbor Shores is a premium development company along the Southwestern coast of Lake Michigan that offers real estate, an 18-hole Jack Nicklaus signature golf course, public walking trails, marina, hotel, restaurant, and more.

mainbanner_1-nofade-wblockmainbanner_1-nofade-wblock

After working on a project for Numbers & Logic. They reached out to lead the design of their client’s upcoming application.

I WAS REQUIRED TO:


Lead the user experience as well as visual design, from beginning to end.

Work within the company’s current visual brand language.

Work closely with a developer to provide assets and help translate the design into code.

AND DELIVER:


High fidelity mockups for different portions of the app.

Various page templates to be used by the client in many ways.

Visual Design Documentation

A look at
the interface.

Home provides quick access to a variety of features from the main menu. The large blocks provide flexibility for various types of content. This also makes it easy for the developer and client to make updates later if needed.

layout-harborshores-12layout-harborshores-12
layout-harborshores-15layout-harborshores-15

The icons created were designed to be sharp and square to match the home screen blocks.


The trails portion of the application can be used as an exercise companion. The application keeps track of times, helps navigate, and also gives you information about the various trails.


Golf features detailed information about each hole on the course such as layout par, handicap, distance, and photos. It also features a scorecard that can be used to track your score while playing. The scores can also be saved for later review or to see progress over time.

harborGolf2_gameplay copy 8harborGolf2_gameplay copy 8

A series of templates were created for common types of pages that could be implemented in various ways by the developers.

Some of these included templates for photo galleries, photo albums, text based pages, and image description overlays.

harborTemplates_gameplay copy 10harborTemplates_gameplay copy 10

Touching on the visual details.

Typography

Abel was used for most of the interactive portions, as well as headings. Maven Pro was used for body copy to improve legibility.

In order for the application to fit their current brand, I created a color palette that expanded on their visual style—often dominated by orange. I wanted the color be present, but not overwhelming.


The app is currently available on iTunes for download. A special thanks goes to Jeff Stoller and Osama En-Nasr for the opportunity. 

[unex_ce_button id="content_eeaz1guzy,column_content_fts0jlr7f" button_text_color="#f68d1f" button_font="bold" button_font_size="17px" button_width="full_width" button_alignment="center" button_text_spacing="1px" button_bg_color="#ffffff" button_padding="15px 15px 15px 15px" button_border_width="3px" button_border_color="#f68d1f" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#f68d1f" button_border_hover_color="#f68d1f" button_link="http://nathanbilancio.com/index.php/work/clothespin/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Previous[/ce_button]
[unex_ce_button id="content_eeaz1guzy,column_content_yqymfoctu" button_text_color="#ffffff" button_font="bold" button_font_size="17px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="#f68d1f" button_padding="15px 30px 15px 30px" button_border_width="3px" button_border_color="#f68d1f" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#f68d1f" button_border_hover_color="#f68d1f" button_link="http://nathanbilancio.com/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Home[/ce_button]
[unex_ce_button id="content_eeaz1guzy,column_content_hzza8i30w" button_text_color="#f68d1f" button_font="bold" button_font_size="17px" button_width="full_width" button_alignment="center" button_text_spacing="1px" button_bg_color="#ffffff" button_padding="15px 15px 15px 15px" button_border_width="3px" button_border_color="#f68d1f" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#f68d1f" button_border_hover_color="#f68d1f" button_link="http://nathanbilancio.com/index.php/work/number-2/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Next[/ce_button]