| HLW Fund Services |
| |
|
|
| Schematic Designs |
|
Wednesday, November 18, 2009 |
 |
|
 |
|
 |
|
Here are 6 design scheme directions. There are 2 basic design problems
we are trying to solve.
1) How do you use harsh existing HLW colors and still make a warm
inviting web presence?
I used a softening blending color that acted as a unifying force between
the cold blue and the red hot red (while also taking into consideration
of your new logo design firms input). The solution is very similar to a
Mondrian painting, becoming a study of color balance in a spatial
context.
http://liquidcommotion.com/1118_hlw_prelim/Mondrian.png
2) How do you convey the main message of "Trust, Strength, and
Integrity"?
Combine a subliminal message with strong pictures with a simple powerful
word message. Even though I am not being hired per-say for my
word-smithing, it is important to explore the potential relation between
word meaning, color and pictures. So I used rough placeholder text as a
rough test.
Here are the rough design directions. We need to pick just one, and move
onto the secondary template designs as quickly as we can.
Let me know your thoughts. Scheme #6 to me is very powerful yet simple.
Scheme #1 is also appealing. |
| sk-1 |
|
sk-2 |
|
sk-3 |
|
| |
|
|
|
|
|
| |
|
|
|
|
|
 |
|
 |
|
 |
|
| sk-4 |
|
sk-5 |
|
sk-6 |
|
|
 |
| |
|
|
|
|
|
|
| Color Choices - w/ Primary Page Design |
|
Sunday, November 29, 2009 11:50 PM |
 |
|
 |
|
|
|
Here are 6 color studies. I like the team (you, Kathy, Tamara, Whit) to evaluate mainly color in this exercise. Picture selection will come in a future date, right now just color. To replace the "too loud bright orange" of the last scheme, I have replaced it with 6 new toned down colors: Burnt Orange, Cinnamon, Clay, Olive, Ruby, and Scarlet. First, please pick one of the color schemes.
Secondly, comment on the typical secondary page layout. Once those decisions are in place we will be ready for the last set of decisions which will be the picture themes and the 3 remaining secondary
page template designs.
The colors were in part based on the color palette that Story Hat designed for you with a few colors I threw in too. The words that say "HLW Fund Services" in the main color field are meant to be a kind of a watermark, to be subtle, to evoke trust and strength. In some of the cases the color of the letters worked very well. In others, not as good. The thing to evaluate is the main color selections. The actual colors of the HLW letters can be tweaked once we establish the main color tone of the design.
|
| Burnt Orange |
|
|
|
|
|
| |
|
|
|
|
|
 |
|
 |
|
|
|
| Cinnamon |
|
|
|
|
|
| |
|
|
|
|
|
 |
|
 |
|
|
|
| Clay |
|
|
|
|
|
| |
|
|
|
|
|
 |
|
 |
|
|
|
| Olive |
|
|
|
|
|
| |
|
|
|
|
|
 |
|
 |
|
|
|
| Ruby |
|
|
|
|
|
| |
|
|
|
|
|
 |
|
 |
|
|
|
| Scarlet |
|
|
|
|
|
|
 |
| |
|
|
|
|
| |
|
|
|
|
| Color Palettes |
|
|
|
Wednesday, December 2, 2009 |
 |
|
 |
|
|
|
I use a pretty cool program that picks color palettes based on pictures you load in. In this case I used a photo of the HLW reception area. In the first case I used the entire picture. In the next three cases I used a cropped portion of the picture which I thought had a better color combination.
There are 6 different input variables (or moods) you can use in this program - Colorful, Bright, Muted, Deep, Dark, and Custom. I used four of the six which were netting the best results. Out of the four solutions I show below, three were made by a computer, and one was made by a human. Can you tell which was which?
The more important question is which of the four palettes do you like? Or if you don't like any, just send me your favorite HLW materials picture and I will send back 6 color palettes of that picture for us to choose from. Fun huh?
Let me know which you like or whether you want to send a new picture? |
| Colorful |
|
Muted |
|
|
|
| |
|
|
|
|
|
 |
|
 |
|
|
|
| Deep |
|
Custom |
|
|
|
|
 |
| |
|
|
|
|
|
|
| Web Page Template Designs |
|
|
|
|
|
Monday, December 7, 2009 |
| |
|
|
|
|
|
|
 |
|
 |
|
|
|
Based on the teams selection of the "Custom palette", and the comments on the winning design scheme, I created 4 main templates that are warm and simple. They reflect the beauty of the office materials and the colors are literally taken from the materials themselves.
The people page uses all the materials in the background of the portraits in the HLW office itself. These materials pick up the colors of the approved HLW color palette and make the statement more deeply "we are HLW".
The typical third level template and the people page blend with the other new template designs but are consistent with the existing HLW site too. This can be seen in the watermark and layout of both.
If we could get the final design approval today of all these designs we would only be 7 days behind schedule. Please send your feedback or approval so I can begin site construction as soon as possible.
.
|
| Home Page |
|
Typical Secondary Page |
|
|
|
|
| |
|
|
|
|
|
|
 |
|
 |
|
|
|
Design Approval - Todd & Kathy approval Wed. Dec. 9th |
| Typical Third Level Page |
|
Company Page |
|
|
|
|
 |
| |
|
|
|
|
|
|
| Design Revisions Set #1 - Monday Dec. 14th |
|
|
|
Monday, December 14, 2009 |
| |
|
|
|
|
|
|
 |
|
 |
|
|
|
Based on our discussions this past week of the 7th in regard to Tamara's new navigation map, I have made minor changes to the page layouts. Please review and approve or send comments back, thanks. Here they are:
Home Page
1) contact us - added link. important link stands out, prominent,
and on every page
2) home button - on each page. logo click also takes user to
home page
3) worm hole jump - HLW Accountant logo placed on home page
All Pages
1) contact us - added link to every page
2) home button - on each page
Third Level Template #1
1) watermark - changed from services / products to our services
2) watermark color square - changed to blue to match new navigation changes
Third Level Template #2 (company)
1) watermark - changes company to about us to match new nav
2) paragraph title - change from company to about us.
My gut feeling is to hold off on final site production until Tamara and I have another design review by phone this coming week to finalize nav and content issues that effect the designs. By waiting on production a few days, we could save a lot of extra changes, time and money since things could be changing. |
| Home Page |
|
Typical Secondary Page |
|
|
|
|
| |
|
|
|
|
|
|
 |
|
 |
|
|
|
Commencement of Website Production - Pending final nav map by Tamara & phone review between Tamara & Drew |
| Typical Third Level Page |
|
Company Page |
|
|
|
|
 |
| |
|
|
|
|
|
|
| Design Revisions Set #2 - Friday Dec. 18th |
|
|
|
Friday, December 18, 2009 |
| |
|
|
|
|
|
|

Quote Placement - Option #1 |
|

Quote Placement - Option #2 |
|
Quote Placement - Option #3 |
|
After having a great phone review with Tamara and myself early this week about the nav map and content structure, it was clear that we need two major additions. One is where to place the quotes on a typical page. The other is what does the bio page look like after clicking through one of the bio pictures. Note that when you roll over each of the bio pictures on the third level "company page", a short summary of the partner will popup.
We need to two decisions from HLW and the team. Which of the three options to use with the quotes. The second decision is which of the bio page designs to use. Please decide as soon as you can. Once we have these decisions, unless Todd, Kathy, Whit or Tamara disagree, I would like to commence site construction.
Remember, changes after this final approval may result in significant extras since changes are very labor intensive once the code for the site construction is complete. Please take your time before this final approval. Thanks. Here are the summaries of the third revision set:
Options for Quote Placement
option #1 - Left hand side, under the main picture
option #2 - Main body text
option #3 - Right hand margin
Options for Bio Page Design
option #1 - Shorter summary under picture, email address at top of page w/ "contact us" link
Option #2 - Longer summary under picture, email address at end of body copy |
| |
|
|
|
|
|
|
 |
|
 |
|
|
|
Commencement of Website Production - Pending final approval by HLW for Quote Placement and Bio Page Design |
| Bio Page Design - Option #1 |
|
Bio Page Design - Option #2 |
|
|
|
|
| |
|
|
|
|
|
|
 |
| |
|
|
|
|
|
|
| Web Page Construction Summary |
|
Approval of all 5 templates by Todd Hankin Friday, December 18, 2009 4:40 PM
|
| |
|
|
|
|
|
Approval includes Quote Placement #1, and Bio Page Option #2 |
| |
|
|
|
|
|
|
| |
|
|
|
|
|
|
| |
|
|
|
|
|
Construction of web pages start Monday, December 21, 2009 |
| |
|
|
|
|
|
Christmas Holiday December 24th & 25th |
| |
|
|
|
|
|
New Year Holiday December 31st & Jan 1st |
| |
|
|
|
|
|
Estimated delivery of first versions of all templates aprox. Tuesday Jan. 5th |
| |
|
|
|
|
|
After initial versions, refinements added, along with PHP server side includes |
| |
|
|
|
|
|
|
| |
|
|
|
|
|
|
| |
|
|
|
|
|
|
| |
|
|
|
|
|
|