...

View Full Version : New design type



Ben@WEBProp
06-22-2004, 06:21 PM
Of the three areas of web design (visual appeal, coding, and accessibility), I am having a hard time being creative and making something worthwile. Please review my most recent work in this image and let me know anything that needs improving.

newmand2
06-22-2004, 08:45 PM
did you make this thread so that we have an excuse to compliment you?! :P

nice job! i really like it

JAVAEOC
06-22-2004, 09:41 PM
Looks good, I like it, it is nice and clear, but can you sent us the file, so we can also look in the code?

Ben@WEBProp
06-22-2004, 09:48 PM
Hahaha, newmand! Thanks, I really appreciate that!

This is actually just a picture done in photoshop. I took an old design and layered everything and then just messed with visuals. Now that I have a compliment or two, I am going to start coding it right away. I should have a link for you guys in by 5:00 tonight, unless something urgent comes up that distracts me from web work. I will post the url here in a bit.

Thanks again!

-Ben

llizard
06-22-2004, 09:58 PM
This is actually just a picture done in photoshop. I took an old design and layered everything and then just messed with visuals.

I really like the design as well.

But what I noticed immediately is that it is in a format that would work well on letter paper in "portrait" style. Most computer screens (I think this is so, anyway) are set up so that they are wider than they are long: 800x600, 1024x768, etc. etc. - ie: "landscape" style.

This means that the page will need to be scrolled down somewhere around the middle of "news". Of course, this is okay, but you might want to fool around with the width of the blue border a bit.

Ben@WEBProp
06-22-2004, 10:41 PM
As I learn more and more about web design, coding, and accessibility (thank you brothercake), I revamp and redesign the site to a better look. I originally started out about a year ago with a frames design that sucked. I did the best I could with some Java Script and corny looking Java Applets I found, but then I learned about css from these forums. CSS helped a ton, and so did looking at some of the members sites here.

Anyway, as of now I have a centered container <div> that holds all my information and is about 700 px wide. I did this to work with an 800 resolution and up. However, I have been studying the liquid layouts of divs and the like that span across whole pages, no matter what the resolution. I want to start and try to get out of the container div, but it will have to do for now.

As far as this index layout goes, I was thinking that the "Welcome..." text could be taken out, and the first two paragraphs relocated down the page in order to give accessibility to other pages more immediatly, either that or switch the location of "featured commercial space" and "news"...although I am not sure which one of those is more pertanent for a user to read. What do you think?

Thanks again for all the compliments, and for the suggestions as well!

-Ben

Ben@WEBProp
06-23-2004, 12:19 AM
Whoops, ran into a little trouble with the coding for this design on the banner portion:

I want to keep the banner the same on all pages, except the text and the picture on the right, and maybe change the color from gold dependant on the page. So, in order to do this, I thought it would be much better to use elements than creating several large banner pictures. The text will be text, the blue strip will be an image, the gold will be split up into several small sections repeated across the rest of the banner area, the logo will be an image, and the picture on the right will be an image. Here is where I am having the trouble: how do I get the layering of these objects correct? Should I use z-order, or iframes (which I have no experience with), or even make several divs and z-order those? How do I correctly semanticly do what I want to do? Thanks!

-Ben

Ben@WEBProp
07-03-2004, 12:23 AM
Quick Question: In the file attached above, what do your eyes go to first? Also, do you think there are enough links to get you away from the homepage yet keep you in the site?

Thanks
Ben

bradyj
07-03-2004, 06:37 AM
My design sense -- it looks much better than before, you've done good with this, but I feel:
- My eyes go to the center of the main first block of text, good job with that.
- The headers are a little boring to my, I would probably center them if they're going to stay text, and play with making some of it bold, and others not (use <strong> would be sufficient)
- The green area seems to be a color that does not flow well with the content. Youmay want to choose a more complimenting color, it doesn't allow your users to really enjoy the pictures, which i imagine your client may want to do.

As a minor thing, I don't like the border-bottom on 'News'... I feel that it breaks up your clean division -- since the border creates a new blank white box at the bottom, and neither of those boxes are structured with the left two. I'd dump it, it would clean it a bit.

All in all, you've done a good job, and I think it's improving :thumbsup:

llizard
07-03-2004, 02:36 PM
Quick Question: In the file attached above, what do your eyes go to first?

Web logo at the top left corner. Then the image under 'aparment special' (typo?)

Please do bear in mind that there are few computer screens that have the resolution that you show on your image. It would be more like the attached image. (Please excuse me for manipulating your image)


edit: I guess it would help if I actually attached the attachment....


Looking at this version, the first thing I look at is "Welcome to Webetc.etc." The navigation bar above that is easy to find.

I echo the feeling about the mudgreen area at the top. Maybe add a bit more blue to that colour to echo the turquoise in the Web logo to the left.

I don't find the look of it dull at all. It's clean.

llizard
07-03-2004, 03:01 PM
As a minor thing, I don't like the border-bottom on 'News'... I feel that it breaks up your clean division -- since the border creates a new blank white box at the bottom, and neither of those boxes are structured with the left two. I'd dump it, it would clean it a bit.

Perhaps an image (nothing obtrusive - maybe an extension of the building??? image that is in the top right corner - I can't quite make it out because of my rotten eyesight) could be put in that huge white area below 'news'. Also, if the white area below 'feature commercial space' were removed, the page would have a more finished look. Or is there going to be text there?



The headers are a little boring to my, I would probably center them if they're going to stay text,


Just sticking my oar in a little further to say that personally, I find centered headers to be particularly dull. I quite like the left alignment of the headers. To emphasize that left alignment, I would remove the paragraph indentations on the text area of "Welcome to Web etc. etc.".

Ben@WEBProp
07-13-2004, 09:35 PM
I have not been able to work on the site for a little while now, but I have returned for help regarding the banner color.

I dont know why, but the computer I use for the most part displays colors wierd. On that one, the gross green yellow I had previously been using looks way better on my main computer...so I have requested to switch monitors in the hopes that will remedy the situation (and yes...i have already tried adjusting the monitor settings themselves). ANYWAY, I am now trying a dar blue color, so please tell me if you think it suites the site better.
Thanks!

-Ben

bradyj
07-13-2004, 09:47 PM
Your monitor needs to be calibrated between the two elements -- common problem in our industry:) nevertheless, you'll have to deal with home users who don't have their monitors calibrated. I'm looking at the one right now, hold on...

gsnedders
07-13-2004, 09:58 PM
I don't like the dark blue bit at the top, it just makes me want to look there and nowhere else, unless that's what you want, people not to look at the text first ;)

Ben@WEBProp
07-14-2004, 12:37 AM
Do you have any suggestions for me to try as an alternate color for the top? Lighter Blue? If you have the rgb, cmyk, or hexadecimal codes for the colors I should try, throw those my way.

-Ben

bradyj
07-14-2004, 01:00 AM
Really? I thought it brought more attention to the text, as white is what grabs the readers eye.

gsnedders
07-14-2004, 01:03 AM
I'd say, a bit more bluey (not a word, I know...), something like RGB 0, 0, 130.

Ben@WEBProp
07-15-2004, 05:17 PM
Well, color aside, I need help coding for the text below "Apartment Special" (yes i fixed the typo on the web...thanks). I cant position the darn thing to go around the picture! If I use the float:right property, the text ends up in my footer! I really dont want to position:absolute it that far down the page...is there any other way to "float" my text around the image like in the example I have previously provided?

-Ben

bradyj
07-15-2004, 06:10 PM
<div>
<p class="floatright"><img src="blah" width="54" height="20"></p>
<p> kjasdkljdie akl;doiasdjme alkdjf enmaskdia...</p>
</div>




.floatright {
width: 54px;
height: 20px;
float: right;
}


That should work, but if not, post us a link so we can see your code.

Ben@WEBProp
07-15-2004, 07:06 PM
When I use the float:right on the text, so that it flows around to the right of the picture (picture being on the left), then I get the screenshot attached.

My css file is at http://www.webpropertiesinc.com/webproperties.css

The page that is currently under renovation is http://www.webpropertiesinc.com

To the main pages source code, the only thing I add is


<div style="background: #ffffff; width: 350px; border-right: 1px solid #C0C0C0;">
<h4>Featured Commercial Space</h4>
<img src="images/gwrcbanner.gif" width="140" height="105">
<p style="float:right">Welcome to WEB Properties, Inc. We are a full service Commercial Real
Estate Firm based in Spokane, WA.</p>
</div>

and then it ends up in my footer!

I did realize that on my main page I am missing a </div> for my container at the end, but when I fixed this the problem still remained!

Any ideas?

-Ben

Edit: Helps if i attach the file i guess

bradyj
07-15-2004, 08:58 PM
You should put a semi colon at the end of the word 'right' in float right, that would close it.
I would recommend adding the float to the image, as that is a fixed size and will probably work better, instead of the text.

If all that doesn't fly, try adding:


overflow: auto;

To your div styles. let's see how that flies.

Ben@WEBProp
07-16-2004, 12:35 AM
I HATE IE!

http://www.webpropertiesinc.com/eagle_ridge.htm

View the link in both IE and Firefox. Notice the links under "Documents" near the bottom of the page in Firefox. Now look at the links in IE. Oh thats right, IE erased a good portion of one and the whole heading! It is not hiding behind my content div, because I already messed with the margins...its like IE killed my text!

HELP!

As for your suggestion, Brady J, I will try that tomorow and let you know how it goes.
-Ben

bradyj
07-16-2004, 12:52 AM
Sometimes, too, I find when IE overlaps elements like that, I need to put an:


overflow: hidden;


In there, since it has some box model issues. You can also do one for IE and hide for the rest, like:


.box {
width: 460px; /* for IE */
height: auto;
}
html>body .box{
width: 480px;
height: auto;
} /*restore corrected value, IE ignores */


IE will ignore the bottom, but all the standard compliant browsers will not and use it instead. So, it works for them all.

Ben@WEBProp
07-16-2004, 06:41 PM
No help there. I tried messing with the widths, the heights, the overflows, the margins, the paddings...nothing seems to work! I even went the extra mile and googled "IE Box Model Problems" and spent a good time trying box model hacks. I can get the "Documents" section to display correctly, but it appears about 70px down the page.

In order to position the part that says "Download" in a good center alignment with the Get Acrobat image, I thought I would just put them in a table. I just want them to line up on one single y-value that passes throught the middle of each element...if that makes sense to you. I dont want them sitting on the same level, as the image is taller and makes it look goofy. If I align thier centers on the same y-level, then it looks ok, like it does in the table.

Is there some other way I can alighn the elements like I have described above?

-Ben

bradyj
07-20-2004, 05:44 AM
there is, but not a clean cut answer -- to probably answer fully, I'd need to see the full code here, otherwise I'm shooting in the dark and might cause more problems.

And sorry for the delay, I was on Family Vacation for a looong weekend.

Big Fat
07-21-2004, 10:46 PM
The user name and pasword are bleeding into DASDUA at the top of the page. It appears DASDUA was suppose to be below the HR, rather than it going right thru it. Otherwise great job!

Ben@WEBProp
07-23-2004, 04:27 PM
Hm, guess I figured it out! The first time that I tried any combination of floats, something would always end up as part of my footer, but I kinda gave up for the last weekend and then tried the float properties on monday only to find that by floating both objects, my layout would be correct. I swear I tried floating both things before and it did not work. I dont know what I did different, but apparently it works!

Thanks for your help once again bradyj...hope your vacation went well!

-Ben

Ben@WEBProp
07-26-2004, 06:32 PM
I did a little work with color and a new layout to save the gobs of whitespace on the portfolio pages. The attached image has two parts: The new on top and the old on bottom. In addition to messing with colors, I changed the portfolio pages from giving quick descriptions to giving a quick-facts sheet in order to attract tenants quicker and more effectively. What do you think? Improvement or deprovement?

Thanks!

-Ben

llizard
07-26-2004, 10:21 PM
I did a little work with color and a new layout to save the gobs of whitespace on the portfolio pages. The attached image has two parts: The new on top and the old on bottom.

Ah, definitely the new one is better.

One thing that disturbs a bit: I find the blue columns on either side of the content to be extraneous. Why not have the page fill the screen? This will prevent people from having to scroll down so much.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum