Author |
Topic  |
sacred
Junior Member
 
USA
153 Posts |
Posted - 30 July 2003 : 14:13:13
|
About this header design. It is something that is not fancy but basic.
http://www.innerhaven.com/fore/default.htm
My husband doesn't like the name of the company hanging on the 4 logo arrow. I do cause it shows contuinity atleast in my eyes, it puts the two together. Like to know other peoples opinions and different ideas on this?
colors? Think they go together?
Don't look at the page content as I have not worked on content layout yet I am concentrating on header design.
Many thanks!
Sacred |
Edited by - sacred on 30 July 2003 16:06:16 |
|
Anacrusis
Junior Member
 
USA
219 Posts |
|
D3mon
Senior Member
   
United Kingdom
1685 Posts |
Posted - 30 July 2003 : 19:06:20
|
It's a 47K image and appears to use an image map to determine the links. Download time and cross-browser compatibility are suffering.
The gold and the royal blues are OK, but the lighter, almost turquoise green seems a little out of place in this design. Have you considered moving th white text 'Fore Engineering' down about half an inch, so it is centrally aligned over the arrow stem?
Also, the arrow head on the right hand side of the '4' seems a little large. Perhaps if you cut off the bottom of the head it might look better?
Heres a sample file I quickly manipulated - note how its almost half the file size. |
 Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod "In war, the victorious strategist only seeks battle after the victory has been won" |
Edited by - D3mon on 30 July 2003 19:07:25 |
 |
|
sacred
Junior Member
 
USA
153 Posts |
Posted - 30 July 2003 : 19:51:14
|
quote: Originally posted by D3mon
It's a 47K image and appears to use an image map to determine the links. Download time and cross-browser compatibility are suffering.
The gold and the royal blues are OK, but the lighter, almost turquoise green seems a little out of place in this design. Have you considered moving th white text 'Fore Engineering' down about half an inch, so it is centrally aligned over the arrow stem?
Also, the arrow head on the right hand side of the '4' seems a little large. Perhaps if you cut off the bottom of the head it might look better?
Heres a sample file I quickly manipulated - note how its almost half the file size.
Hi d3mon,
Thanks for those ideas. I like the arrow thinging and will run it by hubby. Graphic size I always have trouble with when I try and not loose the image quality in photoshop. I set it to 8 because you start getting distortion lower around the words. But I will mess with it some more. If you have suggestions about how to do it in photshop without distorting the words I am all ears or eyes LOL :)
In regards to cross browser compability issues? Mind stating what they are? Becuase the only complicated (if you call it that) is the image map. And image maps have been around for ages. I beleive part of the HTML 3.2 specifications. I tested it on netscape 7.0 and it seems to be fine. As well is working fine on Opera 7.11. So where is the compability suffering? Would like to know becuase I always test this stuff in 3 different browsers.
Thanks for the time and information and ideas :)
yours in deepest gratitude,
sacred
|
 |
|
sacred
Junior Member
 
USA
153 Posts |
Posted - 30 July 2003 : 19:52:41
|
quote: Originally posted by Anacrusis
I like it, I think it looks good.
Thanks Ana for taking the time to look at it and letting me know you opinion.
Yours in deepest gratitude,
Sacred |
 |
|
davemaxwell
Access 2000 Support Moderator
    
USA
3020 Posts |
Posted - 30 July 2003 : 20:01:08
|
Thought I'd throw in my two cents. I'll do it in the "brick and pillow method" I've become accustomed to in our chorus
Bricks (things I'm not a fan of) 1) Fixed width, not centered. I don't mind the fixed width OR the left aligned, but I don't like them together. 2) Gold of the menu bar is a little too bright for the rest. (I think this sticks out more than the turqoise) 3) Logo doesn't seem to go with the rest of the site in terms of color and feel. I would try and soften the "Fore Engineering" portion to melt into the large 4 a bit. Perhaps a slightly "techier" font for the words would help it. 4) Service.htm: I realize you're still working on content, but the text for that page is to the right when everything else is to the left.
Pillows (things I do like) 1) Logo: I like the overall look of it. Unique and distinctive. Could be improved (see last brick), but overall a nice start. 2) Header: Well done header. Looks like it took some time and is well done. 3) Font size: Too many "tech" sites try to be bleeding edge and are hard to read. 4) Professional: Relates back to pillow three. Professional presentation, but well done.
Hope that helps. |
Dave Maxwell Barbershop Harmony Freak |
 |
|
sacred
Junior Member
 
USA
153 Posts |
Posted - 30 July 2003 : 20:12:08
|
Cool David thanks for your bricks and pillows.
<<Bricks (things I'm not a fan of) 1) Fixed width, not centered. I don't mind the fixed width OR the left aligned, but I don't like them together.>>
Totally agree with you on that. I was working on that developing the services template page waiting for responses with the default.htm page from people. Where i was doing the centering.
<<2) Gold of the menu bar is a little too bright for the rest. (I think this sticks out more than the turqoise)>>
I thought about turqouise but wasn't really sure it went that well. I will do a header in that and post it tommorrow and maybe you can let me know what you think.
I actually went off a site that said color combinations and the orange and blue was one of them :)
<<3) Logo doesn't seem to go with the rest of the site in terms of color and feel. I would try and soften the "Fore Engineering" portion to melt into the large 4 a bit. Perhaps a slightly "techier" font for the words would help it.>>
Yes, I am not sure quite what to do about getting it to flow more but will try it with a techier font and see what happens.
<<4) Service.htm: I realize you're still working on content, but the text for that page is to the right when everything else is to the left.>>
yeah was working on the center from your brick 2 :)
Thanks much for your observations they are always appreciated. I will see what I can do.
Yours in deepest gratitude,
sacred |
 |
|
D3mon
Senior Member
   
United Kingdom
1685 Posts |
Posted - 30 July 2003 : 20:21:02
|
With ADSL, the header image took approx 3 seconds to load.
- I opened it up in Photoshop 7 and selected: File > Save for Web
- Since it contains photographic-type elelments you're gonna need to save it as .jpg for best effect
- From the preset settings, Maximum had good definiton but file size was 38K
- High had good definiton but file size was 28K
- Medium had poor definiton but file size was 13K
- Setting the Quality slider to around 45-50 gave a nice balance of quality and file size in the 18-20K region
Since it appeared that the image had already been partly JPG compressed, then working directly from the original image should get you a slightly better quality/size.
Last time I tried an image map in Netscape Navigator 4.7, I'm sure there were problems. Consider also that searh engine spiders may not be able to detect image map links and may skip large chunks of your site.
With careful use of a single table, you should be able to break up that image and create text links in place of the graphic links. This will give you the added bonus of being able to easily change/rearrange those links later on, without having to redo the whole image again.
|
 Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod "In war, the victorious strategist only seeks battle after the victory has been won" |
 |
|
sacred
Junior Member
 
USA
153 Posts |
Posted - 30 July 2003 : 22:10:08
|
Hi D3mon,
Where is the quality slider? I have adobe photshop 7 for windows? When I go to save it as a jpeg it only gives number from 1-10. I do not see any numbers I can do 45-50 quality setting.
Just to let you know there is no problems with image maps in netscape 4.7. As I loaded my old version of netscape 4.7 just to double check and it worked fine. Just so you know for future reference.
Yeah, I could break it down into separate images and put it into a table. But rather use the image map, seeing how i am not doing rollovers, instead of adding more code and tables.
I really appreciate your help 
Many blessings,
Sacred |
 |
|
D3mon
Senior Member
   
United Kingdom
1685 Posts |
Posted - 31 July 2003 : 04:16:21
|
Here ya go, area marked red. Set the value manually in the box or click the arrow on the end to use a percentage slider. |
 Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod "In war, the victorious strategist only seeks battle after the victory has been won" |
Edited by - D3mon on 31 July 2003 04:17:03 |
 |
|
sacred
Junior Member
 
USA
153 Posts |
Posted - 31 July 2003 : 07:39:21
|
quote: Originally posted by D3mon
Here ya go, area marked red. Set the value manually in the box or click the arrow on the end to use a percentage slider.
Ah I found it. Normally I do a Save As and indicate jpg, when you do this option it does not have that screen. But through trying to find it, I realized there is a save for web thinging. Thanks much now I can muck around with making files smaller.
Many thanks!
Sacred |
 |
|
sacred
Junior Member
 
USA
153 Posts |
|
davemaxwell
Access 2000 Support Moderator
    
USA
3020 Posts |
Posted - 31 July 2003 : 12:25:30
|
I'll give you my first impression from each one:
portfolio.htm - it's ok, but doesn't fit the rest of the site. Harsh edges compared to rounded corners.
contact.htm - too bright! Same problem with harshness, not right shade for rest of the color scheme.
services.htm - smoothness is better, but not a fan of the color. Distracts from the rest of the site.
about.htm - probably my favorite of all the color schemes and looks. I would darken the color a little bit to make it flow from the header a little more. Perhaps changing text color from black to white as the background darkens
Perhaps it would help if I give my perspective on visibility. The first thing that should draw my attention should be the content of the site (duh!). Next would be the logo (should be memorable and brandable). Last would be the navigation scheme. I don't want my eyes drawn to the portion that tells me how to leave the page. It should be obvious, yet not distracting.
If you don't agree with my perspective, then feel free to ignore them. Go with the plan you feel has the best impact. |
Dave Maxwell Barbershop Harmony Freak |
 |
|
sacred
Junior Member
 
USA
153 Posts |
Posted - 31 July 2003 : 13:37:33
|
duh, I wasn't thinking about it from the perspective of the whole page. Thinking more like a programmer defining different sections and making them. Couldn't agree with you more.
http://www.innerhaven.com/fore/contact.htm
This is what I did. What ya think? Initially thought about doing it this way but thought it might be too bland. trying to find a happy meduim between to bland - no eye focus to the differet areas and to busy - where it wigs out your eyes.
I tried a techno type fonts but it was too much with the logo didn't look right.
but will make the adjustment about how I look at it. thank you for explaining your perspective.
yours in deepest gratitude,
sacred |
 |
|
davemaxwell
Access 2000 Support Moderator
    
USA
3020 Posts |
Posted - 31 July 2003 : 14:08:59
|
That'll work well. Stands out enough to be useable, but not distracting
I know it's in development right now, but the link for contact goes to contactus.htm and the portfolio goes to portfolio (no .htm). Just thought I'd bring those to your attention.... |
Dave Maxwell Barbershop Harmony Freak |
 |
|
sacred
Junior Member
 
USA
153 Posts |
Posted - 31 July 2003 : 14:34:45
|
quote: Originally posted by davemaxwell
That'll work well. Stands out enough to be useable, but not distracting
I know it's in development right now, but the link for contact goes to contactus.htm and the portfolio goes to portfolio (no .htm). Just thought I'd bring those to your attention....
I couldn't help myself I did one more. last one I swear.
http://www.innerhaven.com/fore/about.htm
Many thanks!
Sacred |
 |
|
Topic  |
|