[Project Complete] - Milton 411 - Website Redesign - $500.00

[andmunn]

(Admin code added by Palmer - 2DC40885XY343502F)

Hello!

I've done multiple contests on Design Outpost (including the previous version of our website), and i've always been happy with the results. It's time for a site redesign (after about 5 years!). We are looking to change the "Feel" and bring in a fresh, new, and clean look. Here are some details:

Company Details

1a) Name of Company


1b)Company Tag Line or slogan:

A

1c) Do you have a company logo?

Yes - Attached.

1d) Do you have a corporate visual identity (a customized (non stock) logo and color scheme carried out throughout your office, stationery, business cards, etc.)?

Not Applicable.

1e) What is the nature of your business?: Briefly describe your products or services:

Website for a small city in Ontario, Canada. Where users can browse local business, post classifieds, etc.

1f) Who is your target market? Who are you hoping to reach with your site?

Users who are living / visiting our town.

Website Details

1b) Do you have an existing website? If so, what is the URL?

also desigined 5 years ago here!).

2b) IMPORTANT: Please list at least 3 URLs (web addresses) of high quality sites that you like the look of (these do not have to be sites who’s business is similar to yours. It aids us in determining what your design style is.) Please consider layout, colors, navigation, graphics, and typography.

1. http://yourneighbours.de/
I like the clean design and enjoy how the colours "pop". I also like the use of white space near the top and the "large" header area.

2. http://www.paravelinc.com/
Again - like the colour contrat, the square icons, and the simplicity of the design.

3. http://notcoming.com/
I like the menu bar at the top...and the typography here..very clean and elegant.

4. http://www.super8.co.uk/
Again - like the simplicity and how 4 buttons pop against the background. Also like the great use of whitespace.

5. http://www.vudumedia.com/
Just like everything about this layout.

6. http://designwoop.com/
Like the boldness of the header / logo - and the colour selection.

3b) What colors or color schemes would you like?

Simplisitc. Clean. White Space. See site examples above.

4b) List the Navigation links for your Site:

I want "4 main" links - Directory, Classifieds, Exclusives, Discounts, and then several "smaller" links - About Us, Contact Us, Site Map, Privacy, Legal Notices. The first four links need to be predominant - either in the form of some kind of icons / logo's, etc.

5b) What type of look are you trying to achieve? (e.g. clean, high-tech, conservative, warm, flashy, etc.)

Clean - minimalistic - taking into account typography. A great desription of the type of design im' looking for...
http://www.smashingmagazine.com/2008/11/17/showcase-of-minimalist-and-clean-designs/

6b) Please provide the addresses of competitors' sites, if possible:

N/A

7b) Do you have any images for use in the design of your site? If not, do you have images, can you offer suggestions of what you type of imagery you feel would be most suitable for your website:

N/A

Deadlines and Deliverables

1c) What is the deadline for your template design?

March 21, 2010.

2c) Will you require HTML coding? (Yes/No)

Yes - we require a front page - and two subpages (both of which will be fairly "simple").

Additional Notes
It's important to note that in addition to the requirnments above, on the "main page" we require:

1. The links to the 4 main sections showing predominantly
2. An outline of the "directory" - including links to all the main categories on i.e.// Automative, Career, Computers, etc).
3. A search box.

Thanks everyone for your participation, and i can't wait to see some great designs.

Andrew!

[Elena]

Hello,
I like your project and will post my version soon.
Thank you,
Elena

[andmunn]

Thanks Elena - can't wait!
Andrew.

[Elena]

Hello Andrew,
Here is my design for you.

Warm regards,
Elena

[andmunn]

Hi Elena,

Thanks for your contribution. It looks nice - but it's not exactly what i'm looking for. Looks a little too busy - and misses the "clean" feeling i'm going after.

Everything just seems a little "too bold" and "too busy"... But thank you for your contribution!

Andrew.

[silviu-ivan]

Hey Andrew,

You can count me in. I love minimalistic websites, but there aren't many clients looking for this kind of websites. Your project is a treat so I'll do my best!

Cheers,
Silviu

[andmunn]

Thanks Silviu - can't wait!

Andrew.

[narapidana]

Hi Andrew,

Pls count me in.Btw,Clean - minimalistic look is a great challenge..:P

- Adam

[andmunn]

Thanks Adam!

Can't wait to see what you come up with. Thanks!
Andrew.

[narapidana]

Andrew,

As promised, attach here the first shot.

http://img.skitch.com/20100311-bha3hbwd9k1hyk9a5wni1h9bjt.jpg

Your feedback is appreciated. :)

Regards,

Adam

[andmunn]

Hi Adam,

Thanks for your submission. This is definately more along the lines of where i'm looking to go, but it's still not there yet. I've attached my "vision" of a layout, and perhaps i caneebtter describe what i'm looking for.

1) Maybe try the "black and white" version of the logo.
2) All "headings" should be text based
3) The 4 main "category" images should be something that POPS (i.e.// the images in the exclusives, directory, classifieds, discounts header).
4) No fancy gradiant backgroudns - looking for simple white :)

I've attached a simple layout of something i'm picturing (obviously open to input).

Thanks!
Andrew.

[silviu-ivan]

Here is my concept.

I was originally thinking about putting the search in the main navigation bar next to the main 4 categories, to be visible on all the pages. After seeing your wireframe I moved it in the content section, but I kept a Search link in the main menu. So if a user is on a content page and wants to do a search he may not know that the search form is only the homepage. So when he clicks the search link he will be taken on the homepage.

Minimalist design doesn't use a lot of graphics,but I couldn't resist from adding is waterfall illustration in the welcome box. Since your town is close to the Niagara Falls I thought it would be a nice touch.

Regarding the 4 boxes in the lower part of the websites: Are they ok like this? Would you like a different style for each box? Do you want to include more text, a short intro of some sort?

I look forward to your feedback.

Regards,
Silviu

http://www.silviu-ivan.com/do/milton/milton-silviu-v1a.jpg

[andmunn]

Hi Silviu!

Well - it looks like we are finally progressing on the right track! Thanks for your input. Here are some suggestions:

1) Can we make the logo a little bit bigger? I would just like it to stand out a bit more.

2) The four buttons - we are definately closer to what i'm looking for. Ideally though, i don't want the "pictures" themselves to say what we are linking to. I would rather, for example, for classifieds have some kind of graphic of a newspaper, for discounts, some kind of graphic of a "sales sign" or something like that..and then above the images, have the text "Classifieds", "Discounts", etc. I do like that you were table to make them stand out.

3) I'd also like the above boxes bigger - perhaps instead of all on one row, we make them bigger, and put 2 buttons on 2 rows (similiar to my mark-up).

4) Although i do like the waterfall graphic - i think i would prefer without - as i'm REALLY trying to take all non-essential elements out of hte design.

5) The directory also, instead of 3 columns, can we try a design with 2 columns? Perhaps some kind of layout simliar to a standard directory: (http://www.google.com/dirhp).

6) The main menu bar at the top - it's not bad - but, doesn't do it 100% for me. I DEFINATELY like the addition of "SEARCH" (thanks for the suggestion). Can we try some simple links here for this, and move the otehr links (about us , etc) down to the footer?

Thanks so much for your help.

Andrew.

[narapidana]

Hi Andrew,

Thanks for your initial feedback.
Attach here a few more layout that hopefully suits your imagination.

Feel free to comments.

Regards,
Adam

1.Clean Design (http://3.bp.blogspot.com/_ps07eiriSWU/S5uwh-PqNTI/AAAAAAAAAbY/f8UNLdUaluE/s1600-h/milton-revised2.jpg)

2.Add light grey box to emphasize the directory listing (http://1.bp.blogspot.com/_ps07eiriSWU/S5uz9I7fbUI/AAAAAAAAAbg/xeFfbZyXLME/s1600-h/milton-revised3.jpg)

3.Enhanced "the box" a little bit (http://2.bp.blogspot.com/_ps07eiriSWU/S5u2_49JA8I/AAAAAAAAAb4/4UZC0gqFo0A/s1600-h/milton-revised4.jpg)

4.Add color a little bit (http://1.bp.blogspot.com/_ps07eiriSWU/S5u1a92w3EI/AAAAAAAAAbw/K_AVrT2RlZk/s1600-h/milton-revised5.jpg)

[andmunn]

Hi Adam,

Thanks for your recent designs. I like the buttons / graphics you chose for the 4 buttons. I also think we are getting closer to where we want to be. i'm not, however, too found of the way the font / directory area looks. Seems a little "too bold" , and not clean enough ...

Not sure whats wrong - but perhaps trying some variotions of how to display this data?

Thanks,
Andrew.

[narapidana]

Andrew,

Thanks for your feedback.Attached here the revised version :

http://img.skitch.com/20100316-cdyu1qh25ybw9cgn64xrxjcnj7.jpg

And this one with underline directory links:

http://img.skitch.com/20100316-mag97yih7wcs5uqgcgr5jwr9m6.jpg

[silviu-ivan]

Here are the changes.

I've tried using only 2 columns for the directory listing, but it turned out really long. My suggestion would be to go with 3 columns so the user can have a better overview of the options here, instead of having to scroll. Is there any particular reason why you want only 2 columns?

The 4 images at the bottom are a little stretched to fit the width of the boxes, but once I buy them they will look much better. I can also always look for some other images if you want.

I look forward to your feedback.


http://www.silviu-ivan.com/do/milton/milton-silviu-v1b.jpg

[andmunn]

Hi Adam,

Thanks for the couple updates. It looks good, but i'm still not "crazy" about the design. Something abotu the header area doesn't do it for me now. Also, still looks a little "cluttered".

Silviu - wow! im' impressed. This is very much the direction i'm looking to go. Looks very clean and sharp. I'm just not to crazy about the images you have used for "exclusives" and "directory". Other than that- this has to be m y favourite design i've seen as of yet...

Thanks so much both of you.
Andrew

[Kogar]

Hello.

I'll have something for you later today.

Regards

[andmunn]

Hi Kogar!

Can't wait.

Thanks!
Andrew.

[cosmic]

here is my concept:

[cosmic]

The above design in browser (http://gersongraphics.com/designoutpost/milton1.html)

[Kogar]

Removed for Revision.

[andmunn]

Cosmic :

Looks good - this is definaetly the minimalist style i was looking for. However, i feel like it's missing just a little bit of flair. I'm also not to crazy about the huge "Milton, Ontario" text. It's a neat idea, but i think it takes away too much from the page, and makes important content areas neccessitate scrolling to even notice they are there. It is a neat idea though.... Overall, i do like the concept. Can you try playing around with it a little and adding the subcategories to the menu as well (i.e// autmotive parts, services, etc).

Kogar:

Thanks for your entry. I'm not to fond of the black header - i much prefer the use of white / whitespace. I'm also not to fond of the footer where you used a simliar approach. Just doesn't really "do it " for me at this point in time overall.... Thank you though!

[Kogar]

Here's a revision.

Regards

[cosmic]

Revisions

[cosmic]

Changes:

added Milton Ontario above the search box
changed the search box a bit
moved the nav links up next to the logo

[cosmic]

milton ontario coloured

[cosmic]

Post 26 in browser (http://gersongraphics.com/designoutpost/milton2.html)

Post 27 in browser (http://gersongraphics.com/designoutpost/milton2b.html)

Post 28 in browser (http://gersongraphics.com/designoutpost/milton2c.html)

[silviu-ivan]

Here are my updates on the 2 photos and a selection of other images we could use. If these don't hit the bull's-eye I'll keep looking. If you have any suggestions about what kind of images might work best, they are highly appreciated.

Let me know what you think.

http://www.silviu-ivan.com/do/milton/milton-silviu-v1c.jpg

[andmunn]

Hi Cosmic / Kogar / Silviu,m

Thanks for your recent updates. I can't really suggest any mor changes to these designs, other than minor cosmetic changes at this point (which i'll keep to myself until i choose a winner).

If it's acceptable, i will keep this contest open to Thursday March 25 for any last minute entries. i will also choose a winner on this day.

Thanks everyone for your participation.

Thanks!
Andrew.

[narapidana]

Andrew,

Revised versions:

[HTML]http://img.skitch.com/20100323-kbhskfxrreb4fyd872tgtrtxfp.jpg

Another one :

http://img.skitch.com/20100323-r6wak8ejt673tejp74e7wdta68.jpg

[andmunn]

Hello All,

I have chosen to work with silviu-ivan - Thanks for the great design. I am on holidays for 2 weeks Silviu (returning April 13th), so i will not be able to converse with you until then.

But i will definately need some changes to your post #3, plus the subpages required.

I hope we can talk when i get back from Holidays.

Thanks!
Andrew.

[silviu-ivan]

Sure, let me know when you get back.

Enjoy you Holidays!

[andmunn]

Hi Silviu,

Still on holidays - but i now have daily access to email.

For the "discounts" section, can you divide into both "post discounts" and "view discounts" (just have as two seperate images - half the size of the other images).

Also, in the header area ("a community for milton ontario"), can you isolate some kind of box and have the heading "Featured".... i'm not sure what this is going to look but - but it will feature any new updates / specials, etc... Let me know what you can come up with.

Look forward to what you come up with.
Andrew.

[silviu-ivan]

Hey Andrew,

Something like this? The Featured section can be 1 line of scrolling right to left text (like they have on some newspaper and television websites).

Let me know what you think.

http://silviu-ivan.com/do/milton/milton-silviu-v1d.jpg

[andmunn]

Hi Silviu,

Thanks for the updates. Looks good - i'll probably ask for 1 or 2 minor changes (image changes) when i get back from holidays. In the mean time, why don't we get working on the two subpages i require. This will also help me ensure the subpage works with the main page well. The subpage will be:

a) For the "Category" of the directory (i.e./ automtive accessories:)

http://www.milton411.com/directory/automotive/accessories/

b) A second subpage for the "actual business" in the directory:

http://www.milton411.com/directory/automotive/accessories/d-sousa-performance-ltd-l84.html

The script i will be using is found here:

http://www.phpmydirectory.com/demo/johnnys-italian-restaurant-1.html

Please note, the business page should have the following features:
> Space for goople maps API
> Name / Address / all important disposition of company
> Add Reviews
> Reviews
> Print
> Download PDF
> vCard
> Add to favourites
> Claim Listing
> Report Listing
> Bookmark and Share

Both subpages should have the same header / footer (you can remove the milton slogan), but you shoudl maintain the search box - perhaps move it off to one side?)... Again, im' looking for something clean and crisp - so whatever you come up with (so far it's been greater!) i think will be supper.

Thanks,
Andrew.

[silviu-ivan]

Hey Andrew,

What do you think about something like this for the category page? Do we need to add anything else?

On the detail page would you like to also use icons for all the links you listed (like they have on the phpmydirectory demo page)?

http://silviu-ivan.com/do/milton/milton-category-v1a.jpg

[andmunn]

Hi Silviu,

For the detail page, I'm not that crazy about the icons they use - so any suggestions you have are great. However, if you think we need to use them - go ahead, and i'll see what it looks like. In restrospect, they aren't that bad - i just want to make sure they look "neat and tidy". I'm open to any interpretations.

Also, for the category page, i'm not to crazy for the font used for the Milton 411 > Automotive > Accessories AS WELL as the font used for the menu (Directory, Classifieds, Exclusives) on both this page, and the front page. Can we keepp this as the same font (just bigger) as used in the footer menu (home / about us, site map, etc)?

Thanks,
Andrew.

[silviu-ivan]

Hey Andrew,

Here are the updates.
1. Homepage. Let me know what images you want to change. If you have any suggestions on what to use it would be really helpful.
http://silviu-ivan.com/do/milton/milton-silviu-v1e.jpg

2. Category page.
http://silviu-ivan.com/do/milton/milton-category-v1b.jpg

3. Detail page - with 2 different icon sets and no icons at all.
v1
http://silviu-ivan.com/do/milton/milton-detail-v1a.jpg

v2
http://silviu-ivan.com/do/milton/milton-detail-v1b.jpg

v3
http://silviu-ivan.com/do/milton/milton-detail-v1c.jpg

Let me know.

Cheers,
Silviu

[andmunn]

Hi Silviu,

Thanks for the updates. I will go page by page with suggestions:

Main Page:
----------
For the "images", here's some suggestions. Please note i like when there isn't to much white space around the images, and they use up the whole "box":

Directory:
Becuase it's a business directory, maybe some picture's of business's, or on the other end of the spectrum, maybe a "map" of the milton ontario area (screenshot from mapquest of Milton, Ontario?). Also, i searched I stock photo, and i think this would work:

http://www.istockphoto.com/stock-photo-2980813-yellow-pages.php

Classifieds:
A picture of a "classifieds section" of a newspaper (not the "jobs section") - i've attached a few - not sure which would work best within our context.

http://www.istockphoto.com/stock-photo-7030987-classified-section-in-local-newspapers.php
http://www.istockphoto.com/stock-photo-8917540-classified-advertisements-newspaper.php
http://www.istockphoto.com/stock-photo-9983154-classified-ad.php

Exclusives:
I don't like "Private", because i don't want users to think this is something they can't acceess. I was having trouble with this one. I like this picture though:

http://www.istockphoto.com/stock-photo-6371710-butterfly.php

I want to portray something "cool", "free", and something people will want to download.

Discounts:
Can you enlarge this picture to the "whole with" again - i don't like the way it looks with both "buy" and "sell" - lets just leave it as discounts. I actually don't mind the image you used in post 17.

Category Page
--------------

Can we try to only list 1 business per row (instead of two).

Business Page
-------------

I starred at the 3 variations for a while, and for the life of me, i can't spot the differences?

For the "image" of the business, instaed of the Pizza, can you make a generic "Milton 411" placeholder image - just incase a business doesn't have an image (which is possible).

General
-------
For both the Cateogry / Business page - i don't like the way the "Milton 411 >> Automtive >> " (etC) looks like - the text seems messy / plain? Can we try some different fonts?

Thanks Silviu for all your revisions - it's greatly appreciated. You have done a wonderful job, and we are almost there!

Andrew.

[silviu-ivan]

The only things that is different in the 3 version of the business page are the icons next to the links (Classifieds, Images etc).

I'll work on the changes tomorrow.

[andmunn]

Ah - i see it now - i like the icons in the first version the best - and i think we need the icons (looks better then without).

Also, have an additional questions - if i were to ask for an additional subpage (a "contact us" page), same header / footer as teh otehr pages, just a form and maybe some kind of header image - how do we go about doing this in terms of financing / etc?

Andrew.

[andmunn]

Hi Silviu,

One more change - and both the category and the business page - i'd like something (maybe some sort of "seal" like you sould see on a diploma/ certifiate) which says "Discounts Available"..this should be predominantly displayed on the category page (if the business has a discount), and on the business page (if the business has a discount they have posted).

Let me know if this makes sense..
Andrew.

[silviu-ivan]

Hey Andrew,

Here are the changes.

For the homepage I chose some images that have a bit more color in them. Some of the ones you suggested were a little too bland compared to the one from discounts. The one I've choose have a little more depth.

The butterfly image you suggested is ok, but it's kind of expensive (30$ - the smallest version). If you can get it from istock, then we can definitely use it.

There's no point in getting stuck finding the perfect images, we can alway replace them later one.

Let me know what you think about the other changes.

For the contact page I'm sure there's something we can work out by email after the project is done.

http://silviu-ivan.com/do/milton/milton-silviu-v1f.jpg

http://silviu-ivan.com/do/milton/milton-category-v1c.jpg

http://silviu-ivan.com/do/milton/milton-detail-v1d.jpg

[andmunn]

Hi Silviu,

Thanks so much for the updates - for the business page - i think you used the wrong set of icons - preferred the "first" example you had.

Otherwise - ithink it looks great - really can't say anything negative at all :) You can start coding if you like - or pehrpas we can get started on that extra subpage?

Let me know,
Andrew.

[silviu-ivan]

For the contact page you mentioned something about a small header...can you detail a bit on that - what do you envision?

The contact form will consist only of name, email, captcha and message inputs?

[andmunn]

Hi Silviu,

Yes - for the contact page, name, email, message, captcha are good. I also want a little paragraph (you can just put "junk" text there now") about how to use the form...

The "image" i talked about - i thought to use the same header / footer you did in the others- but remove the saerch box, and perhaps put in a full "width" image of something - just to make it a little "nicer". Just a simple rectangle image - maybe of the town, maybe of something to do with "contact us", etc rigth under the bold black line in the header (in it's own box like the front page - but full width).

Hopefully that makes sense :)
Andrew.

[silviu-ivan]

Makes perfect sense. The trickiest task will be to find an image that would look good with a small height and big width.

Next week I'll be away from the office with some personal business from Monday to Wednesday, so I won't be able to do any work in that period. But I will have the first 3 pages coded and ready to go by Friday. Is this ok with you?

If you are in a hurry I can have somebody else code them and have them ready on Wednesday (though I would prefer to do it myself).

Let me know.

Silviu

[andmunn]

Hi Silviu,

As you suggested, i would prefer if you did it as well :) No rush - take care of what you have to.

Thanks!
Andrew.

[andmunn]

Hi Silviu,

Just realized i made one "boo-boo" on my main page - pretty minor - but if you haven't started coding - perhaps we coudl change. The button on the main page which states "Directory" shoudl instead read "Contests", and an appropriate image be selected.... I goofed! Let me know if this is an issue.

Andrew.

[silviu-ivan]

Hey Andrew,

No problem at all. I got back from my trip one day earlier so yesterday I've managed to code the homepage. I'll work on the other 2 pages today.

Silviu

[andmunn]

Great - hope everything went well.
Thanks Silviu,
Andrew.

[silviu-ivan]

Here are the 3 page. All of the them are valid xhtml and the css is also valid. I've tested the pages for consistency in IE6,7,8 Firefox, Chrome, Opera and Safari and it all looks great.

1. Homepage (http://silviu-ivan.com/do/milton/html/index.html)

If you are ok with the 4 image choices I will buy and replace them.

2. Category page (http://silviu-ivan.com/do/milton/html/category.html)

I've coded this trying to use the markup from the phpDirectory listing page to make the implementation easier.

3. Business details page (http://silviu-ivan.com/do/milton/html/details.html)

Let me know what you think.

Regards,
Silviu

[andmunn]

Hi Silviu,

Everything looks good - the only thing i noticed - is the main page seems to be a little bit skewed to the left of the subpages (i.e.// when i go from the main page, to either of the subpages, the header / footer shifts a little to the right).

Thanks!
Andrew.

[andmunn]

Hi Silviu,

Also, on mroe change - on the "quote" on the main page, can you add "gorgoues paths, scenic walks, breathless countryside & a growing and vibrant community" and then keep the rest :)

Thanks!
Andrew.

[silviu-ivan]

Hey Andrew,

The only reason I can think of why the header/footer (most likely the whole website) shifts to the right is because the homepage is longer and you probably get a scroll bar to the right side of the browser witch is not visible on the shorter category/detail page. Can this be the answer? If not can you tell me what browser are you using?

I'll buy the images for the homepage and post the updates a bit later today.

Cheers,
Silviu

[andmunn]

Hi Silviu,

Checked the scrollbar issue - i'm using IE 6 - and having the problem - just between the main page and the subpages (the two subpage align perfectly). I ahd the same problem on another computer as well..

Hm?

Andrew.

[silviu-ivan]

Hey Andrew,

I've just updated the images and the welcome text. Please check the homepage (http://silviu-ivan.com/do/milton/html/index.html) again.

I also found what was causing the shifting. The featured box had a width of 960 px and a border applied to it => 962px. And IE6 has it's own way of interpreting borders. I've fixed it now.

[andmunn]

Really looks great! Thanks so much - is there something we can work out for a contact page?

Andrew.

[silviu-ivan]

Hey Andrew,

I didn't receive any notification email of you last post. I'll get the 3 psd files and the 3 html files ready for download.

I'll also start working on the graphic for the contact page and we can continue this extra part of the project by email. My address is silviu /at/ silviu-ivan /./ com

Cheers,
Silviu

[silviu-ivan]

Hey Andrew,

I've just sent you a private message with a link to the files. Thank you for a great project!

Silviu

[andmunn]

Thank you Silviu for everything - looks great!
Andrew.

[BlueCherryGraphics]

PROJECT UPDATE: moved to archives