Portfolio: General

All the sites listed below are currently live and maintain the design and style as was originally intended.

The Project: Microsoft Flight

Flight UI - Martin McCann portfolioPurpose: Need for a site to promote and distribute a free version of an on-line flight simulator.

Goal: Create the User Interface and template structure for all pages before production.

Challenges: Produce a design that would imply the light, airy quality of flying and be modular in functionality. Use of content panels were required due to the stagnate background tableau. A translucence style was created and used on all the text panels and support imagery.

Since this game is internationally distributed there was need for Localization. Problems related to this arose due to the structure of the left Call to Action panels. Thus I created each CTA panel individually. On the main page CTA, a separate graphic for each language translation was produced.

Production was handled by a another firm so the Photoshop documents produced needed to be well organized and structured so that it would be easy for the production artist to assess the necessary image elements such as “hover” and “current” states and separate out elements such as text.

The production team originally used the PNG file type for the full page graphics but that proved too heavy a file so JPEGs were produced to minimize load time.

Production: UI, image development

Tools: Photoshop – Code done by others.

Visit Site >>

The Project: Microsoft Dynamics CRM Partner Business Systems

Microsoft PBS UI - Martin McCann portfolioPurpose: Need for a site to promote the use of and sell Microsoft PBS to MS partners.

Goal: Create the User Interface for all pages based off a provided wireframe of the main page.

Challenges: Produce a design that would organically lead the user through the site, from the introduction (What), through the sell (Why) and to the sale (How). The (3) panel idea was presented in the wireframe and was to be the bases of all the subsequent pages. This lead to maintaining the use of a panel as the main image element throughout the site.

Since the client wanted the user to peruse the site in a prescribed order then a traditional main navigation scheme would not be needed. Thus the navigation scheme that was developed consisting of just the (4): Home, What, Why, How.

The production was handled by a another firm so the Photoshop documents produced needed to be well organized and structured so that it would be easy for the production artist to assess the necessary image elements such as “hover” and “current” states and separate out elements such as text.

Production: UI, image development

Tools: Photoshop – Code done by others.

Visit Site >>

The Project: Bite Las Vegas

Bite Las Vegas UI - Martin McCann portfolioPurpose: Need for a site to promote a Las Vegas music revue.

Goal: Create an exciting user experience that highlighted the visual artistry that maintained to a strict User Interface..

Challenges: The dynamic qualities of a Las Vegas show needed to exists in some manner on the site. Essentially moving all the artwork to the background allowed for a tableau, or story line to be created that accentuated the content without overwhelming the information presented.

All the background images were created from production stills and received considerable Photoshopping to achieve a Post-goth art style.

Production: UI, image development, hand-coded CS

Tools: Photoshop, Dreamweaver (for site organization), XHTML, CSS, JavaScript

Visit Site >>

The Project: Friends of the Children – King County

Friends of the Children - King County UI - Martin McCann portfolioPurpose: Need for a site to inform and request donations and other support for the Friends of the Children – King County mentoring program.

Goal: Create an User Interface that would inevitably lead the user to click the Donate button. Also Word Press core would be used so the client could update and maintain the site once it was designed and produced.

Challenges: Having used Word Press on only two previous projects it became a learning opportunity to create a custom theme based on a generic structure.

Template layouts were designed for the main page, an overview page and a list page from which background images were derived.

Production: UI, image development, hand-coded CSS, Word Press database

Tools: Photoshop, Dreamweaver (for site organization), XHTML, CSS, JavaScript, Word Press

Visit Site >>

The Project: The Geisness Law Firm

The Geisness Law Firm
The Geisness Law Firm

Purpose: Complete restructure from the previous table architecture to CSS.

Goal: Using existing website content, restructure using CSS and incorporate contemporary SEO theory with the intent to draw users to the Maritime Law Section and subsequently contact the Firm.

Challenges: Some redesign was necessary due to the additional links added to the navigation menus.  All the imagery was repurposed, compressed for quick load time and renamed to lend efficiency to the SEO.  Some page content was rewritten for optimal performance.

Production: Logo creation, image development, hand-coded CSS

Tools: Photoshop, Dreamweaver (for site organization), XHTML, CSS, JavaScript

Visit Site >>

The Project: Artistic Resources & Technology

Artistic Resources & Technology
Artistic Resources & Technology

Purpose: To showcase the unique technological products & services of Artistic Resources & Technology (A.R.T).

Goal: The diverse services of A.R.T need to be presented in an easy, logical interface so the prospective client can easily find what is best for them.

Challenges: This is a large site (+134 pages) which needs to be easily navigated. Many different menus and sub-menus are used to help the user find their answer(s). An index page always present in the main-nav has been created to ease the search.

Production: Logo creation, image development

Tools: Digital camera, Photoshop, Image Ready, Adobe GoLive for Layout – Code done by others.

Visit Site >>

The Project: Molyneux Entertainment

Molyneux Entertainment
Molyneux Entertainment

Purpose: Molyneux Entertainment is an international production company that needed world wide exposure.

Goal: A site that would both sell their services and could be used to recruit new talent for their many projects.

Challenges: The client wanted a site designed in the manor of Leonardo. All new imagery needed to be created for the dynamic banners and incidental images in each section. The unique sub-menus in each section required specific attention. The inclusion of a Dancing Man that appears throughout the site was developed to create spontaneity.

Production: Logo creation, image development

Tools: Photoshop, Image Ready, Adobe GoLive for Layout – Code done by others.

Visit Site >>

The Project: Petit Jardin

Petit Jardin
Petit Jardin

Purpose: To create a web presence for a container garden service.

Goal: Showcase the artistry of Petit Jardin and the many projects currently blooming in the Seattle area.

Challenges: For the imagery of plants and flowers to emulate best how they would look freestanding on a patio it was required to cut out each floral grouping and arrange accordingly.

Production: Image development

Tools: Photoshop, Image Ready, Adobe GoLive for Layout – Code done by others.

Visit Site >>

The Project: International Traveler for Hire

International Traveler for Hire
International Traveler for Hire

Purpose: To high light International Traveler for Hire primary service as a provider of courier duties.

Goal: Simple yet eye catching layout mostly text with a dynamic collage of travel related imagery.

Challenges: A way to create movement without traditional imagery. An ever changing list of major international cities was developed to emulate travel to these different destinations around the world.

Production: Logo creation, image development

Tools: Photoshop, Image Ready, Adobe GoLive for Layout – Code done by others.

Visit Site >>

The Project: DirectTENANT

Direct Tenant
Direct Tenant

Purpose: To showcase the uniqueness of Direct Tenant as an all inclusive directory system.

Goal: To distinguish DirectTENANT from it’s more cumbersome competitors.

Challenges: Digital screens do not photograph well so all the screens had to be re-created digitally and placed in the screen frames.

Production: Logo creation, image development

Tools: Digital camera, Photoshop, Image Ready, Adobe GoLive for Layout – Code done by others.

Visit Site >>

 

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *