Web Design

[amitgeorge]

So in the days of Photoshop, Corel, Flash, Gradients, Transitions do people still possess basic design skills ?

What if we are given a system with just NotePad and Internet explorer and asked to create a website ? Will we be able to do so ?

So here are the rules :

1) No Grafics / Flash are allowed.
2) You can use Small images for Icons.
3) You can use client side markup languages like VML as an alternative for images.
4) You can use photoshop etc for color coordination but the final result can contain HTML and CSS only.
5) You can use HTML editing softwares like Dreamweaver, Frontpage etc as long as rule 1 is not broken.
6) Theme : Administration console, Can have the following :

links to various sections (like a control panel)
grids with data
editing area
logo and/or title (no grapfics / flash)
Anything you can think of


7) Client side only so no PHP/ASP etc will be required. Primary focus : design.
8) IE 6 should can be the main browser.... extra points for cross browser compatibility.
8) Last date for submissions : 5th Feb 2005


The winner will be based on originality, color, functional capacity, detail and wow effect.

Innitially you can submit screenshots the designs but be prepared to submit the code for review.

This is an open battle...

Anyone up for it?

[Yeldarb]

I'll give it a shot.

We should have a theme though, like a made up "client" that wants this so that our designs are all on the same page at the end. It would be cool to see the different takes on the same original starting idea.

What about javaScript? Is that allowed? (Or PHP?)

[mpelland]

hmm this could be a good first battle for me. I agree that a theme would be cool to have. Are there any restrictions for the languages?

[amitgeorge]

Theme ????? Ok ... Something we can all use some day later.....

An administration console.

Can have the following :

links to various sections (like a control panel)
grids with data
editing area ?
logo and/or title

Suggest more things.....

Also maybe someone can suggest a better name for this battle.


Edit:
-------------------------------------


restrictions for the languages


Plain HTML and CSS.

Client side only so no PHP/ASP etc will be required

Also will 1 month be a good enough cutoff time ?

[mpelland]

wow, thats a lot of time. well sounds good to me. I will try and think of a name.\
One question, how do you make an admin console do anything with no back-end or server-side technologies? or is it just going to be a dummy site?

[amitgeorge]

wow, thats a lot of time. well sounds good to me. I will try and think of a name.



Yeah 1 month is like too much time since it takes 2-3 ? hours to make a design.... but I would like more people to join in....

The contest will begin on 20th Jan.... and go on till 31st Jan ......

Mods can take up the designs on 1st of feb....



One question, how do you make an admin console do anything with no back-end or server-side technologies? or is it just going to be a dummy site?

Yeah no serverside yet...... Cause we are really concentrating on the design aspect ....

[simplistik]

Hmm.... well, I'm not gonna be entering this but I just want to try and clear a couple things up for the few ppl that will join.

You say no graphics... but you say icons can be used. If there isn't some type of GUI it's kind of pointless, since there will be no actual user interaction. So how can you be judged on anythin? By doin that you knock these right out of the judging catagories: originality, functional capacity, detail and wow effect... only color left to judge on. Maybe making graphics and things minimal instead of graphically based is a better choice. Like these:
http://www.mediatemple.net/services/webhosting/controlpanels/webcontrol/wc_summary.php
http://2advanced.net/hosting/cpdemo/

Just a suggestion

[hl]

no FTP ... GRR!

:)

um so javascript is client side... is it allowed?

[mpelland]

If there isn't some type of GUI it's kind of pointless, since there will be no actual user interaction. just because there are no graphics doesn't mean there is no interaction. there is A LOT that can be done with CSS 2. I would like to be able to use some other scripting languages though. all client-side of course. for instance a couple javascripts, and maybe some other things.

[amitgeorge]

the main focus was on

no use of imaging and animation softwares

and still producing good quality interfaces.... but if you all feel javascript should be used then i am open...

[Gazler]

I'd just like to mention at this point that my website http://gazler.com was created with notepad and paint (except the header).

I'd enter it in this battle, but it uses server-side, so I'll just let you admire it from a distance.

[amitgeorge]

I'd just like to mention at this point that my website http://gazler.com was created with notepad and paint (except the header).

I'd enter it in this battle, but it uses server-side, so I'll just let you admire it from a distance.

The use of the header will disqualify this entry since it defeats the purpose of the battle

[Yeldarb]

Whoa, wait, administration panel? I meant like make up a company, say Joe's Golf Course or whatever and then have to design it for that.

And what about the "icons" you mentioned earlier?

[amitgeorge]

Whoa, wait, administration panel? I meant like make up a company, say Joe's Golf Course or whatever and then have to design it for that.

And what about the "icons" you mentioned earlier?

Making a normal website like your joe's golf course is also a good option but like simplistik said, their isnt much we can do there....

With an administration console, atleast we have elements like control panel, data grids, links, etc to play arround with..... what do you think ?

[simplistik]

just because there are no graphics doesn't mean there is no interaction. there is A LOT that can be done with CSS 2. I would like to be able to use some other scripting languages though. all client-side of course. for instance a couple javascripts, and maybe some other things.

Never said that... he said that's it's not gonna be live it's gonna be a comp.


Yeah no serverside yet...... Cause we are really concentrating on the design aspect ....



Making a normal website like your joe's golf course is also a good option but like simplistik said, their isnt much we can do there....

With an administration console, atleast we have elements like control panel, data grids, links, etc to play arround with..... what do you think ?

:h: Is this keyboard turned on?

No... I didn't say that about a website. I said that about an administration panel. I think making a website for a company would be a much better option.

[mpelland]

Well I put this together last night, let me know if it is along the lines of what you are thinking. Keep in mind there are NO images, NO server side languages...http://www.gossyp.ca/htmlcss_ss01.jpg

[amitgeorge]

Well I put this together last night, let me know if it is along the lines of what you are thinking. Keep in mind there are NO images, NO server side languages...http://www.gossyp.ca/htmlcss_ss01.jpg

very much.....

though the logo on the left is objectionable.... and the graph on the right is it image or html ?
if it is an image then it is not allowed....



ps i better start work too.... the battle is on ...

[Kristopher]

I'm not interested if I can't at least have a graphic header. I"ll think about it though.

[mpelland]

very much.....

though the logo on the left is objectionable.... and the graph on the right is it image or html ?
if it is an image then it is not allowed....when i said no images i meant it. 2 files right now. the css file and the htm file. that is all. i drew the logo in the header with a CLIENT language called VML and the menu / graph / layout is CSS

http://s92351106.onlinehome.us/battle/

[ditt0]

I like the idea..and I think it is a challenge for any css/html coder - designing a website from pure code. I'm in.

[exorxist]

Hmm, sounds tough... I'll try it though. Thanks amitgeorge for the invite. I don't think my design will look that good, but might as well get those coding limbs stretched out (they have not been used in a looooooong time). hehe.

[simplistik]

when i said no images i meant it. 2 files right now. the css file and the htm file. that is all. i drew the logo in the header with a CLIENT language called VML and the menu / graph / layout is CSS

http://s92351106.onlinehome.us/battle/

Layout doesn't work on Safari or Firefox, nor does the logo. VML is interesting though... lots of time and effort goes into that to make those shapes.

[amitgeorge]

Layout doesn't work on Safari or Firefox, nor does the logo. VML is interesting though... lots of time and effort goes into that to make those shapes.


Good point..... but still.... i support the entry....

[andr.in]

sounds interesting... but I don't think I have enough time... and even if I do... I'm too lazy to create a design... so I think I'll pass ;)

[simplistik]

Good point..... but still.... i support the entry....

Well it could work... was just lettin him know so he can touch it up. Cause if it boils down to funtionality, then that would have to bring him down a notch.

[Shouri]

Very interesting. I'll see if I can find time to design something...

[mpelland]

Layout doesn't work on Safari or Firefox, nor does the logo. VML is interesting though... lots of time and effort goes into that to make those shapes.
I am not quite done yet and will look into cross browser compatibility.

[3pinter]

Shoot! Nice challenge... too bad I absolutly don't have a spare hour or two left... ****! I love notepad!!

[Jeff Wheeler]

I think this would be more fun if you gave us a design and all we had to do was make it with the least amount of code possible.

As it is, what are the browser requirements?

[morse]

I'm in. Dreamweaver?

How about if it's valid css and valid html, it works.

[amitgeorge]

i say ie 6 should can be the main browser.... extra points for cross browser compatibility

[amitgeorge]

So here is my first work :

[rdj]

I am in, i will to code up something nice!

[virusescu]

Dreamweaver is allowed? If i do everything manually in notepad it would take to long - it's an unnecessary waste of time.

[amitgeorge]

Dreamweaver is allowed? If i do everything manually in notepad it would take to long - it's an unnecessary waste of time.

Yes Dreamweaver is allowed....

[morse]

Sounds good. Does the code need to be valid? I think that would be the best way to go instead of this IE business.

[Jeff Wheeler]

I think Firefox, IE, and Opera win should be requirements. Who told you IE had good standards css support? IE is pitiful ;P.

[morse]

IE is worst. <a href="http://jigsaw.w3.org/css-validator/" target="_blank">Valid!</a>

[amitgeorge]

i say ie 6 should can be the main browser.... extra points for cross browser compatibility

?

[pou-pou]

oh d*mn, I would be totally in this, but I don't have time, so much work. :C

[morse]

Do we have a due date?

[amitgeorge]

Since a number of people are asking about rules and dates here and via PM,

I have updated the first post with a consolidated list.

Please see that
http://www.kirupa.com/forum/showthread.php?t=82504&page=1&pp=15

[amitgeorge]

Heres my second entry.....

[morse]

Just one thing. Can we make a simple, purdy site, or the control panel, because admin panels are ugly and most people don't see them anyways...

[amitgeorge]

go ahead

[morse]

Rad :)

[Maniaci]

I'm in if there is room still. And it can be any design, not just control panels/backends right?

[amitgeorge]

I'm in if there is room still. And it can be any design, not just control panels/backends right?

You are welcome.

just keep in mind that the last date is 31st

[morse]

Yea, just design a nice page :)

[Maniaci]

Alright, here is my general mockup... still working on a color scheme:

[ditt0]

Here's my submission...i didn't get the time to work much on it as job keeps me busy most of the time, but..here it is.

[amitgeorge]

Here's my submission...i didn't get the time to work much on it as job keeps me busy most of the time, but..here it is.

I am sorry but this entry is invalid because of the top left logo....

I will wait one more day before we will close this .... however if you want, we can make an extension....

[bwh2]

here's my entry: http://www.haveri-media.com/kirupadmin

[morse]

Ok. I made a mini-site kind of thing. No fancy admin panel, but whatever. You can view the site yourself here: http://beta.morsedesigns.com/kirupa

http://beta.morsedesigns.com/site.gif

[ScHAmPi]

here's my entry: http://www.haveri-media.com/kirupadmin
Nice but there's a little bug in the green theme I think, maybe it's firefox on linux only though... here's a screen:

[ditt0]

I am sorry but this entry is invalid because of the top left logo....

I will wait one more day before we will close this .... however if you want, we can make an extension....
What do u mean?The rules never mentioned that the site can't have my name on it.It's all xhtml + css, no graphics, except for the bullets. So, again, why is the entry invalid?

[amitgeorge]

What do u mean?The rules never mentioned that the site can't have my name on it.It's all xhtml + css, no graphics, except for the bullets. So, again, why is the entry invalid?

I am talking about the DITTO DESIGN logo

If it is pure (x)HTML and CSS then it will be allowed.

Post the link where you have uploaded the design or submit a zip file for evaluation.

[ditt0]

Yes, it's only xhtml and css. I'll post it in the morning when i get to work.It's on my computer there.

[bwh2]

Nice but there's a little bug in the green theme I think, maybe it's firefox on minux only though...yeah, i've only had time to test in IE6 so i feared my menu gradients and layout wouldn't work right in firefox.

[ScHAmPi]

amit can you postpone this for a week, I still have exams till thursday, but I'd like to drop a design in, I'm not very good but I want to give it a try...

[amitgeorge]

amit can you postpone this for a week, I still have exams till thursday, but I'd like to drop a design in, I'm not very good but I want to give it a try...

Ok. Battle Extended till 5th Feb.

Please note there wont be any more extensions

[ditt0]

Here's the link to my submission
http://www.smart.info.tm/ditt0/example/design.html

[amitgeorge]

Here's the link to my submission
http://www.smart.info.tm/ditt0/example/design.html

Looks fine !!!

[ditt0]

Thank you:)

[exorxist]

Hey, I like these posts! I wish I had more time, I would make a submission as well. Keep it up! I'll def come back to vote when you post a poll.

Cheers :beer:

[Maniaci]

Gah.. I made/tested my site in Firefox, and then went over to IE and it was so messed up haha. I so wish that there was only one browser :upset:

[morse]

XHTML/CSS ;) :love:

[Maniaci]

I’ve minutely delved into XHTML, but I just can’t seem to grasp it... haven't tried THAT hard though. Could you point me in the right direction? A good beginner’s tutorial would suffice.

[morse]

It's not much different. Just some slashes in different places... More advanced stuff might be different, but the simple stuff you will actually use is quite straightforward.

Here is a good site: http://www.macromedia.com/devnet/mx/dreamweaver/articles/tableless_layout.html

[morse]

Also,

http://www.macromedia.com/devnet/mx/dreamweaver/articles/code_standards.html

This one is especially good, the first one has more to do with css ;)

[ScHAmPi]

Ok, I dont think I'm finished already but well I couldn't resist to post already what I've got. Pointers always welcome, I'm trying my best to make it a nice clean coded page...

http://butchersinaction.com/schampi/KirupaWebdesign/

[Maniaci]

Use a different font... i hate TNR and it looks crappy in my opinion. Javascripts are pretty spiffy ;).

Lol and what major are you? Im guessing physics or chem :look:

[amitgeorge]

i think he is jealous

[ScHAmPi]

Use a different font... i hate TNR and it looks crappy in my opinion. Javascripts are pretty spiffy ;).

Lol and what major are you? Im guessing physics or chem :look:
Hmm strange, I(ve only used Trebuchet and Helvetica, but maybe you just don't have them on your machine, I thought those were universal...And I thinkk you're a little confused, there's not a single javascript in there..."without javascript". It's pure HTML transitional and CSS. I'm still workin on it though.
Thanks for the reply.

Edit: O and I'm going for Industrial engineer in computer sciences :D Yeah indeed we got lots of boring subjects...

[amitgeorge]

ok Guys tomorow is 5th the final date

on 6th I will asks the mods to setup the vote

:)

[morse]

:)

[ScHAmPi]

Okay, here's version 3. It's finished now (I think). Hope you like it :D

http://www.butchersinaction.com/schampi/KirupaWebdesign3

[bwh2]

Okay, here's version 3. It's finished now (I think). Hope you like it :D

http://www.butchersinaction.com/schampi/KirupaWebdesign3
i'm also seeing times new roman. make sure if you're using trebuchet, that you're calling it "Trebuchet MS", not just "Trebuchet"

[ScHAmPi]

k I'll look into that, tonight, haven't got time now, I'll post the editted one as soon as I can

[Maniaci]

Alright, here is my final entry... I decided to keep it just black and white... cant get a color scheem to work.

http://www.thekarshnertriplets.com/extras/battle/

Attatched is the zip of all the files.

[ScHAmPi]

Well I've been looking in to some of the other standard fonts, and I discovered that indeed everyone was seeing TNR, I don't have trebuchet on my PC's either. But actually I like it on my website, I've changed it to some other fonts and I wasn't satisfied with them, so I'm just going to leave it to version 3.
http://butchersinaction.com/schampi/KirupaWebdesign3

[ScHAmPi]

Ok... since there's not yet been made a poll I editted my page somewhat. Just details...it'z now fully valid HTML Transitional and valid CSS. The hovers in "Learn to count" now work in all the browsers. (meaning I tested with IE, FF, Opera). And everything elso works in those three browsers too. There's a little but in the nav hover in IE but I'm 100% sure it's a IE browser bug, if I need to explain it I will :P, but basically in IE the hover of "Home" works as it should but the others don't while the code is identical... Conclusion: IE sucks but we all knew that didn't we ;)

edit: http://butchersinaction.com/schampi/KirupaWebdesign4 (forgot to post the link)

[amitgeorge]

Ok... since there's not yet been made a poll I editted my page somewhat. Just details...it'z now fully valid HTML Transitional and valid CSS. The hovers in "Learn to count" now work in all the browsers. (meaning I tested with IE, FF, Opera). And everything elso works in those three browsers too. There's a little but in the nav hover in IE but I'm 100% sure it's a IE browser bug, if I need to explain it I will :P, but basically in IE the hover of "Home" works as it should but the others don't while the code is identical... Conclusion: IE sucks but we all knew that didn't we ;)

edit: http://butchersinaction.com/schampi/KirupaWebdesign4 (forgot to post the link)

We already have setup the poll....

Its here :
http://www.kirupa.com/forum/showthread.php?t=84747

[ScHAmPi]

O sorry hadn't seen :D

How can we see the results? Do we vote on ourselves?

[amitgeorge]

Well you are not allowed to vote but.... I guess the mods will post a new thread for the results

What we can do is ask the mods to reject our votes later.... so for the time being, we can see the results

What we need seriously is advertisement cause nobody replied to the thread.... i mean after 96 views at the time of this posting.

[ScHAmPi]

Well I put the vote now in my footer too, and I've just found out a way to check your score, as a guest you can see them so just log out and you can see them... :D
Dunno if there are other ways of advertising?

[mpelland]

hey, wish i had a chance to work on mine (since the initial job) but I ran out of free time. Good work everything

[JackD]

I used to use dreamweaver and stuff, but i got so used to the codings i just use Notepad now, fits me perfect.