[REQ-TEMPLATE] 2 pages website 100$

[Dismay]

Type of Contest : Web site design/template
Prize : 100$
Contest End Date & Time : December 14

The design is for a website that sells/buys specific credits. The design is about providing simple interface to the customer, so any user can easily buy or sell the credits in fewsteps.
I have drawn the desired template structure, so you can get the general idea of what and how I want the template. You can play around with colors, icons, fonts and forms and as well conduct minor changes to the structure itself (for example use icons instead of text for language, move the text inside or outside the box/table) in the end I would like to receive design for two pages - the main page and the DEPOSIT/WITHDRAW page (with forms), I don't need design for logo, just leave text there.

 

[Erdy]

I don't understand the interface. From WMZ or WMR you can convert to USD and what else? It says method1 and method2. What does this mean?

Is there already a functional website for this? How is this going to work. Creating two pages with a few buttons and a form is no problem but what will the form do when you press the send button. Is it just sending an email to you?

I won't design anything confusing that I don't understand myself. I don't understand those method1 and method2 things. Also what do you put inside the 4 boxes on the left and inside the two boxes on the right?

 

[Janine]

Is this for PSD only or you want it to be coded?

 

[Dismay]

First of all I dont need the code for forms to work, I just need the design + CSS.
method1 and method2 are just variables for now it could be as CASH or PAYPAL or whatever I will change it later.
the boxes are icons related to methods which once again I don't need from, I have suitable icon for each method ( WMZ/WMR/method1/method2) for design purpose you could use random pictures for those 4 boxes.
But I do need some creativity from you for the main page icons, for language selection, for livechat, same as for the SEND button.
If your have anymore questions, please ask.

 

[Erdy]

I'm working on this. Custom buttons and CSS is no problem at all.

The only unclear part for me is the two boxes on the right where it says "pay ... wmx" and "get ... usd". I understand that you will calculate and display the currency conversion here. But if we put input boxes of forms I don't think you can put dynamic text inside them. I guess I will just put static text on that field with a background colour. Those two boxes are not actually to input but they will only display numbers.

 

[Erdy]

Here is what I did so far. On the first page I will add a button for live chat and another one for about. I will work on the other page tomorrow.

The text in language selection is editable text. I don't use images when it is possible to have editable text. The text under the main buttons is also editable text. It is easy to make an image or text into a link. But notice that the clickable area for the language buttons or main buttons is a bigger rectange that covers the text and image. This is all done in CSS with divs. Here is the demo.

If you let me know if this is too shiny I can change the style easily. It would help if you can show some examples of the style you are looking for. I was actually going to design the buttons simpler but I don't now what style you want. Instead showing examples you can also describe the style with descriptive terms such as too playful, too corporate etc.

Thanks
Erdinc

 

[Dismay]

The boxes on the right are forms, customer can either enter the amount he wants to sends or the amount he wishes to receive, since we have a commision for our service the amount will be different.

Erdinc
Thanks for the input,
I think it is too colorful i need more strong colors, also don't spend your time on logo, I will later add it on my own. But you got the structure I like, keep working on the buttons I would say.

 

[Erdy]

I changed the buttons. They are less colourful and have stronger colours now. I can change them more if a different style is needed but I need more description or examples. I will work on the rest later today.

 

[Erdy]

I have completed the whole package. There are 4 pages:

edit: ----removed old links----

I have also added a go back button to all pages except the home page. I designed all buttons myself (3 main buttons, go back button, two live chat buttons). There is a live chat offline button too. I can make the live chat button navy if you like.

Of course the CSS file is an external css file. There is no image tag in any of the HTML pages. Let's say you want to change the logo to another one with different dimensions. This should be done in the CSS file. The idea is that you only need to edit the CSS file and not 4 different HTML pages. Of course if you are familiar with iframes and PHP include files, I can arrange that easily. I didn't want to make it complicated.

Let me know if you think something needs improvement. Also you can still show an example of a button that you really like and I will mimic the style.

Bye
Erdinc

 

[Dismay]

Well it's getting better, but i still dont like the icons. the livechat button doesnt fit the site at all. but the colors are now better, stronger, not cartoonish.

 

[Erdy]

I have done the following changes:

1. changed main buttons to more professional clean buttons.
2. changed the live chat button to fit the site
3. changed the hover effect on main buttons. Notice that you don't have to hit the button itself. Hitting the text is also possible. This was done with CSS while keeping the text as editable text.
4. I have used transparent png images for language selection, back button and logo. This way you can set a background colour for the body element (the whole page). IE6 png fix is applied to make this work in IE6 without braking the validation. This is valid CSS and HTML.

See live demo here. Here (---edit:removed old link----) is a single page showing what happens when you change background colour in the CSS file.

Here is the other live chat button in case you need it.

Edit:
I have added round corners and drop shadow to the main box.

Erdinc

 

[Dismay]

Perfect! I'm pretty sure i will take it.
Can you perhaps play with the pages with forms, make it look nicer ? and perhaps some more examples with different backgrounds (patterns maybe)

 

[Erdy]

Perfect! I'm pretty sure i will take it.
Can you perhaps play with the pages with forms, make it look nicer ? and perhaps some more examples with different backgrounds (patterns maybe)

Of course I can do that. I will work on these areas and post some versions for you to choose. This could take some time. Maybe a day, but I'm on it.

Bye
Erdinc

 

[Dismay]

Also the live chat icon is still kinda unfit the design.. please see if there are other options

 

[Erdy]

Hi,

I have done the following changes:

1. I designed a few live chat button versions for you to chose from: (top one is the old one)

2. I added a style switcher where you can assign all sorts of style changes you want. Currently only the background of the body element changes to a desired colour or to a desired image. You can change the background tiling image.

This style switcher is a javascript switcher that I found somewhere. It didn't have those nice little square buttons that you see on top left of the site. The reason I added the switcher is because I always wanted to design something like this. Lol. We can remove easily it if not needed. You might think this is overkill for such a small website. Well yes, but it looks nice.

3. I changed file system from html to php because I'm using now PHP includes. This is nothing complicated to be scared. There are just some mini html pages that are inluded in each page. For instance, to change something inside the head section, like meta tags, you only edit the head.html mini page and upload only that page.

I had a look on customizing forms. There are things that I can do to make them look nicer. Unfortunately this is not a very easy issue. Forms are deeply connected to the operating system on the clients machine. Basically you can't change most form elements. But no worries I will make them look nicer before this contest ends.

Here is the live demo.

Bye
Erdinç

 

[Ookie]

Please wait for my entry.

 

[Erdy]

Dismay,

You haven't posted any new comments for a while. There are many different live chat buttons on the page. Can you tell me which one you like more?

Also I rearranged the forms again following form layout principles. I have looked into this subject in depth. I removed tables from form design. Currently there isn't any table used anywhere.

I also added initial values (pre filled text) to texfields that vanish on click.

Notice that in the background lots of things are happening that are not visible. For instance I optimized the image sizes to the maximum level. I have also merged some images to reduce image number and server requests. The 3 main buttons are actually a single image file.

It is slightly more than two pages. This is how it looks in dreamweaver:

Ookie,
Where is your entry? If you are going to beat me on this, get your entry in soon!

 

[Ookie]

I don't think I will enter, no time left.

 

[Erdy]

I don't think I will enter, no time left.

Yeah, I can understand this. I too have spend more time on this than planned. I need to work on other projects too.

Btw, you could contact the contest holder and ask for an 48 hour extension if you feel like entering. That's possible according the rules. I like competition. I'm just too worried to take a last minute punch and have no time to respond to it.

While working on this project I come across to the following video that explains form design principles. Anybody who designs forms should watch this video by Luke Wrobleski from yahoo.
Web Form Design - MIX Videos

Cheers
Erdinç

 

[Dismay]

Sorry for the delay, from flying back from denmark to russia.
The winner is obviosly Erdinc since i'm satisfied with the design, hower the style bar should be removed the background should be white. the back and onlinechat buttons should match in colors