0
   

Learning to design a website - feedback pretty please?

 
 
Reply Mon 17 Sep, 2007 09:37 pm
It's up to me now. My former colleague that was doing it (and I didn't like it anyway) left and we won't have money anytime soon to do the much needed design overhaul of the website. Until then, whatever I upload, that will be our website. And I want it to look decent or at least tolerable. (Plus I really enjoy learning it, and my inner control freak is screaming of joy that he will be able to maintain the website and make it look like he wants... yes, my inner control freak is a He...).

I am trying to design the first page - with some clickable items on the left bar, some news updates in the middle (i want it to be in squares that are sort of dispersed...irregular, but am failing somewhat at that) and mission statement on the right. Now here's my attempt:

http://www.centerforconciliation.org/Homenew.html (is it kosher to post the link here? I mean- it's not live on our website, this is just my working version, so i hope so).

I am hoping for feedback, tips, suggestions. Is the "mission statement" on the right too wordy? The left hand side menu - what can I do to make it more like a menu bar, it appears so 'vulgar' to me right now. Plus, you have to imagine text and clickable links in the middle.... not there yet. Just tinkering with design.

I'm using Dreamweaver 8, going about it the 'trial and error' route. Ugh, my eyes are buuuuuuurning!
  • Topic Stats
  • Top Replies
  • Link to this Topic
Type: Discussion • Score: 0 • Views: 3,408 • Replies: 34
No top replies

 
tinygiraffe
 
  1  
Reply Mon 17 Sep, 2007 09:56 pm
i really like it, it looks like you're doing okay.

i'm not sure you have a consistant theme with your fonts, however. they should be pretty much the same sizes and colors from one page to the next. it looks kind of mixed.

one thing that's a real problem is you have some very small fonts that are also italic.

i'd go as far to say it's too heavy on italics- remove any you can, and it will be a lot easier to read the text. (there's quite a lot of text to read, but sometimes there has to be. just try not to make your pages too long.)

i'm not saying make your fonts huge either, but have a look at it in firefox. if you go to the portableapps site you can get a copy of firefox that will run from a cd or usb key if you don't want to install it.
0 Replies
 
fishin
 
  1  
Reply Mon 17 Sep, 2007 09:57 pm
Hmmm... The mission statement is in text that is almost impossible to read on my laptop screen. Laughing I'm at 1400X1050 resolution though so that may be unique to those with very high resolution settings. The font size chosen doesn't match up with the font sizes used on the rest of the page though and that tends to throw things off too. Consistancy with things like that are what makes WWW page seasy to navigate and read.

I don't know how much the word is used elsewhere but "concillation" will, IMO, confuse most U.S. readers that aren't in that business. "Dispute resolution" is the much more commonly used buzzword (phrase).

Indenting the paragraphs and leaving a space between them would also make it a bit easier to read. You also have all of the text in italics except the opening line. Not sure if that was planned or not.

I don't think the mission statement is to wordy. I'd change a few things (I'd replace "International Center for Conciliation - the ICfC -" with "International Center for Conciliation (ICfC)" and "The Center" with "The ICfC") but the statement seems to be pretty clear otherwise.
0 Replies
 
dagmaraka
 
  1  
Reply Mon 17 Sep, 2007 10:03 pm
Terminology is set fishin... Laughing We are in fact pushing conciliation, it denotes something very different from dispute resolution... but aaaanyway, that is for a lengthy discussion... BUT: that's a good litmus test. That means we should probably have a word or two about that on the first page....

THE FONTS!!! THey are driving me insane. They do what they want! I can't make them all be the same and I spent hours battling them. I am looking at the codes, trying to decipher where it's stuck for each block.... gah! And I haven't even added the text to the pictures yet - that will be another major font battle.... plus it also insists on double spacing where the pictures are.... makes me want to beat my computer to pulp!
0 Replies
 
dagmaraka
 
  1  
Reply Mon 17 Sep, 2007 10:05 pm
Shocked Oh! Thanks for reminding me, giraffe. I was oNLY looking in firefox. Must look in other browsers, too.
0 Replies
 
CalamityJane
 
  1  
Reply Mon 17 Sep, 2007 10:17 pm
The text on the right is very hard to read. That should be definitely bigger,
perhaps not in cursive and a clearer font would be nice. Something like
this maybe...

http://img257.imageshack.us/img257/7637/webhr4.jpg
0 Replies
 
fishin
 
  1  
Reply Mon 17 Sep, 2007 10:17 pm
dagmaraka wrote:
THE FONTS!!! THey are driving me insane. They do what they want! I can't make them all be the same and I spent hours battling them. I am looking at the codes, trying to decipher where it's stuck for each block.... gah! And I haven't even added the text to the pictures yet - that will be another major font battle.... plus it also insists on double spacing where the pictures are.... makes me want to beat my computer to pulp!


Welcome to the wonderful world of Web page development! Razz

I've never used Dreamweaver so I can't offer any help there. I know that when I used Microsoft's frontPage it would do whatever it wanted. I learned to create the basic page layouts and let FrontPage generate them and then I'd go in an manually edit the HTML code in a text editor to get things the way I wanted them for final use.

Maybe someone with some Dreamweaver experience will pop in and offer some ideas.
0 Replies
 
dagmaraka
 
  1  
Reply Mon 17 Sep, 2007 10:46 pm
that's pretty much what i do, fishin. i lay it out, then dive into the code and edit there.... haven't gotten far in this one yet. i'll post tomorrow to show where i got.

your layout looks much clearer, CJ...though i don't want to emphasize the text that's in that bar on the right. that's only for the procrasinators that have time to read....

what should be central is the middle part. The pictures are just accompaniment to the text that will come there around those pictures - updates on our projects. Which will make it overall text heavy... I am shortening the long text that is there and I need to put it somewhere where it's visible, but not distracting. And I want to make the left hand side menu a bit 'lighter' - more like CJ's.... UGh. Why me?


(i love it, i must admit). DORK.
0 Replies
 
dagmaraka
 
  1  
Reply Mon 17 Sep, 2007 10:54 pm
Ah, one more thing.

The TABLES!!! Mad I have everything laid out in this complicated table - where i'm splitting cells, mergins cells... I didn't figure out any easier way to do it. But that's why the bar on the left and the text blocks in the middle are such a bitch... when I add one word, they all go and reformat themselves left and right... gah Evil or Very Mad Is there any simpler way of doing it? I just want to plop down text boxes and make them stay where i want them, and put pictures next to them... And plop them down irregularly, which is darn near impossible in this complicated table i devised.

But, I have one desirable quality for this kind of tomfoolery: i'm godawfully stubborn. And patient, because it's like 'playing' while I should be writing... It's rare, because it feels like procrastination, but it's actually what my boss wants from me right now! Perfect!
0 Replies
 
dlowan
 
  1  
Reply Tue 18 Sep, 2007 06:20 am
No rational comments on the site, Dagglepuss, but it is fascinating getting a glimpse into your world.


We need your skills here.
0 Replies
 
sozobe
 
  1  
Reply Tue 18 Sep, 2007 06:25 am
I suppose it's already set that you have to use Dreamweaver?

If there is any wiggle room, I SO recommend SiteKreator. It's easy easy easy and produces really nice results, IMO.
0 Replies
 
dagmaraka
 
  1  
Reply Tue 18 Sep, 2007 03:11 pm
Yeah, it's the Dreamweaver alright. If I was designing from scratch, I'd consider other programs, but since all the pages up there already, I better learn this Dreamweaver thing. The SiteKreator looks nifty and easier, but I never get to do things the easy way Evil or Very Mad

The fonts are cooperating today...we'll see what I can come up with.
0 Replies
 
Butrflynet
 
  1  
Reply Tue 18 Sep, 2007 04:37 pm
Here's my general critique, mostly about layout and fonts. A few image critiques as well. I second Sozobe's recommendation for Site Kreator. Your website isn't very complicated and would be very easy and not time consuming to convert to Site Kreator. I'd even volunteer to get you started and do the basic set up for you. You'd also have a lot more features available to add to the site. You also might consider Bravenet. (Both are free and both have the option of webpage templates or do-it-yourself. Both also have expansion capability for a fee.) Bravenet takes a little more knowledge of html, but not much. It has a little more layout flexibility than Site Kreator and is very compatible with Blogger. The draw back is that it is mostly add-on modules and you'd have a bit of work setting up all those.

Either way, once done, neither would require much further maintenance other than content changes. Here's my critique. My offer to help is there if you'd like it.


Home page:

The font style being used is very difficult to read, especially when in smaller size. Switch to something more easily read like Arial, Veranda, Trebuchet MS. The shaded background and similar font color also makes it difficult to read as the font shrinks in size. You need to have a sharper contrast between the two. You might consider eliminating the shaded background and using borders to separate/highlight areas of text. That will also help reduce the "monotone" look of the page.

Images: You need a more stylized arrangement of images and text. It just looks unorganized and cluttered. The images need to be cropped to emphasize the focus of the picture rather than including all the background trees. Image sizes should be enlarged or make them clickable thumbnails that people can click on to see a larger view. They are too small for anyone not familiar with the content to have an idea of what they are photos of. For a more professional look, add a narrow border around the images.

Header: Love the logo and font style for the header text. For the address and "former" lines, switch to lower case rather than all caps. The font you are using is difficult to read in the smaller font sizes. Rather than changing the font style, switching to lower case will make reading it a lot easier.

Navigation/menu bar: Any possibility of adding a bit of a border to this area to have it stand out from the other text on the page? Consider alphabetizing the menu items so they are easier to locate when searching for an item to navigate to.

Right-hand column of text: Add an extra blank line between paragraphs to give it more "white-space." It appears as one massive block of text without it and many people just won't read it because of that. Turn off justification and let the text flow naturally.

Left-hand column of text: Layout consistency is a problem here. Everything else on the page is left-justified. The items in this column are all centered and it just gives a ragged look to it.

Carry the colors in your logo throughout your color scheme. Use the green and browns to change font colors when emphasizing portions of the text. Maybe alternate font colors for the various country labels for people to click on.

Content: Give people a reason to keep coming back to your website. Have a space on the front page with information that is constantly changed/updated. Use the Projects area for this. Give periodic updates and status snapshots of the projects and not just an overall description of the project. Consider embedding a blog on the homepage for this purpose to post updates and any newsmedia reports related to your organization and projects.

Graphic: Consider using the olive branch portion of the logo image as a divider/eye-catcher/space filler. It will help break up the text a bit and provide some color contrast. Here's an example:

http://butrfly.net/Albums/MiscellaneousGoodies/images/ICFCleaf.jpg


Board page:

Good. Any possibility of adding a small head shot image of each board member to go along with each bio or at the top as a collage? If not, consider using the leaf graphic as a divider between each bio.

Methodology page:

Good use of white-space. Consider making the layout more consistent. Everything is left justified except for the image and caption. They are centered. Change image and caption to left justification. Add a border line to the image if possible.


About Us page:

Excellent. Use this as a model for your Board photos on the Board page.

How to Help page:

Lots of info on this page that should be more prominent and easily found via the home page. You don't know it exists until clicking on the How To Help page. Add a clickable text box on the Home page for Fellowships and another for donations.


Reading Room page:

Any possibility of adding a two-line description of the papers to entice readers to click on the report title?

I like the layout on this page and the use of background shading.
0 Replies
 
dagmaraka
 
  1  
Reply Tue 18 Sep, 2007 05:32 pm
Whoa, thanks butrflynet! Lots of good tips. I particularly like the leaf idea... and using of the browns in the titles maybe... I'll experiment.
I am making the fonts more readable, hopefully, using Verdana mostly. I couldn't figure out how to change them, but I'm becoming better. One thing I will also standardize is the width of all pages to be the same- I believe it will feel more professional, cleaner. I'm elarning a lot, and it's so much fun!

I'm still gonna stick with Dreamweaver though for now. I'm sure that once I'll learn all the ropes it won't make much difference anyway, and I like the liberty I have in Dreamweaver - of course that makes it more complicated, but I like challenges....
0 Replies
 
dagmaraka
 
  1  
Reply Tue 18 Sep, 2007 05:40 pm
And yes on the layout. I will use the shading consistent throughout... and fonts, widths, etc.... UGH...but yay.
0 Replies
 
dagmaraka
 
  1  
Reply Thu 20 Sep, 2007 01:03 am
well,i tinkered and tankered, two days now... here's the interim outcome:
http://www.centerforconciliation.org
It still needs work, and next will come the text cleanup, but oh well. only 24 hours in a day, only 7 days in a week. And I'm but one dainty Slovak lady.
0 Replies
 
patiodog
 
  1  
Reply Thu 20 Sep, 2007 01:15 am
Main thing I would think would be to make things bigger. I've got a lot of extra space on either side of the material when I open it. Your table column widths are set as absolute numbers. I don't know how things work now, but back when I was fiddling with this stuff in html you could set the column width as a percentage of the viewer's screen or as an absolute width. When it was set as a percentage, it always filled the screen horizontally, regardless of what the resolution was set at.
0 Replies
 
dadpad
 
  1  
Reply Thu 20 Sep, 2007 01:50 am
The intro kinda doesnt go anywhere.

I found the font hard to read.

The pic of the temple mosque and Synagogue has a link that goes nowhere.
0 Replies
 
Craven de Kere
 
  1  
Reply Thu 20 Sep, 2007 02:06 am
You should add padding to just about everything. That alone will make a huge improvement.

You might also want to try to just customize better templates. Here are some free resources:

http://www.oswd.org/ - open source web design, full templates and mostly css oriented
http://www.freecsstemplates.org/ - Full templates
http://www.glish.com/css/ - An early example on css layout that has been used as a layout template by thousands (have a look if you want to get rid of your layout tables)
http://layouts.ironmyers.com/ - css layout again
0 Replies
 
Craven de Kere
 
  1  
Reply Thu 20 Sep, 2007 02:09 am
dagmaraka wrote:
well,i tinkered and tankered, two days now... here's the interim outcome:
http://www.centerforconciliation.org
It still needs work, and next will come the text cleanup, but oh well. only 24 hours in a day, only 7 days in a week. And I'm but one dainty Slovak lady.


You should get rid of the splash intro page. There are only few legitimate uses for splash intros and it's a common web design pitfall.

http://www.google.com/search?q=splash%20pages

Just skim those results and you'll see a lot of places where you can read why they are a usability problem and will reduce the effectiveness of your site.
0 Replies
 
 

Related Topics

Webdevelopment and hosting - Question by harisit2005
Showing an Ico File - Discussion by Brandon9000
how to earn money in internet - Discussion by rizwanaraj
The version 10 bug. Worse then Y2K! - Discussion by Nick Ashley
CSS Border style colors - Question by meesa
There is no Wisdom in Crowds - Discussion by ebrown p
THANK YOU CRAVEN AND NICK!!! - Discussion by dagmaraka
I'm the developer - Discussion by Nick Ashley
 
  1. Forums
  2. » Learning to design a website - feedback pretty please?
Copyright © 2024 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 09/07/2024 at 08:35:28