View Full Version : My new website: version 2
Agrajag
03-12-2009, 10:54 PM
A few months ago, I started my first website. The general consensus was that the design was unintuitive and overall quite dull. I have used the last few weeks to rebuild my site from the ground up. I even learned html along the way.
But nothing's perfect, and I have trouble stepping outside of myself to see what is working and what is only working for me because I already know how it works. Basically, please visit my website and tell me what I'm doing all wrong.
linky: http://bitsandbobs.freetzi.com
Thank you in advance to anyone who checks it out.
Falafel
03-12-2009, 11:18 PM
Website is way too wide and the icons are wayyyyy too big, making the website incredibly hard to navigate. I don't know what size and resolution your monitor is, but on my 19" monitor this looks huge, I can't help but imagine what laptop users are going to see.
On a positive note, the drawings as icons are great, but alas, the title is too big.
Cyberninja
04-12-2009, 12:04 AM
Like Falafel said, everything is waaaay too big. Humongous, in fact. Tone it down. Your old website was a lot more neater, tbh. I like the whole notepad/drawing style, you have going on there. But even those need some improving. There's a big difference between coming across as playful and coming across as childish.
SkinkLizzard
04-12-2009, 12:39 AM
as cyberninja and falafel have said everything is far to large and this is even when viewed
on a 25.5" monitor, I'd reckon you can reduce everything to at least half its current dimensions.
In terms of the notebook look and feel, it currently feels like a notebook from primary school to perhaps early high school. I'd suggest trying to make it look slightly more mature like late high school/varsity notebook. another suggestion is that you could make your navigation buttons on the top look like those sticky tabs organised people tend to litter their notes with :)
edit: other than that on a side note I keep reading the url as bits and boobs...
Evil_Toaster
04-12-2009, 04:58 AM
Go breasts go!
BlackShipsFillt
04-12-2009, 09:10 AM
The website is a little bit too wide, there will be people viewing this at 1024X768, so you cannot really exceed 990 pixels or so. (unless you have a very good reason to do this, like for artistic concept or shock value)
So the navigation needs to be crunched up a bit. I suggest that instead of using gaps to denote sections you rather colour the background of the buttons for each sections' differently and keep the buttons closer together.
The buttons themselves could be slightly reduced as well if need be... the drawings are smaller width-wise than the writing above them so if the writing was reduced in size you could make the buttons smaller... and then if you remove the gaps between the buttons you could easily fit your navigation onto a laptop's screen.
The drawings are more problematic however... What you've done is mix MS-paint and children's drawings.... Both these are well established styles having their own symbols and meanings... Both of them invoke nostalgia, Paint invoking nostalgia for early pc games while children's drawings in this context suggest easily childhood aspirations for making games (and music) and that you are living that dream now.
While on some level it makes sense to combine these styles, it ends up being a mixed metaphor... 5 year olds don't draw in paint these days, which makes the artist a 20-something year old MS-Paint nostalgia freak who still draws like a 5 year old. It doesn't read well... and isn't charming the way I think you intended it.
If this is a problem for you... and I am being very critical here... I suggest you draw these things in pencil crayon and scan them in... or better yet, scan in or source some actual children's drawings and use those.
I do like the concept... When I am making games I do feel like I am living out my childhood aspirations, which I think is the feeling you were trying to get here... but the style confuses the concept a bit...
Although there is the other route... Your games have more of a MS-Paint feel... So maybe illustrating it in that style could also work... though I expect if you were to do this thoroughly it'd actually be more work. I'd suggest watching a lot of Code Monkeys... the pixel art there is great... although an easier route could be that of early spectrum games, Spectrum games wouldn't be that hard with their big chunky pixels...
http://www.mdfsnet.f9.co.uk/Software/Spectrum/Games/Images.htm
http://www.icthistory.co.uk/wp-content/uploads/2009/01/lunar_jetman_1.gif
http://webzoom.freewebs.com/matakishi/ChaosAni.gif
http://www.alfonsomartone.itb.it/kgfgfu.png
http://flatbatteries.com/images/gsh/jacknipper21.gif
http://www.nowgamer.com/static/images/feature/285/390_8061_review_screen_13.jpg?i=1242751268
http://www.icthistory.co.uk/wp-content/uploads/2009/01/chuckie_egg.gif
http://www.game-addicts.com/wp-content/monty1.gif
Though there are probably way better examples out there... (I'm beginning to feel like making a spectrum website myself)
The site isn't difficult to navigate either, I quite like it's simple, clearly labeled and presented, layout.
I'm sorry if this sounds like a lot of criticism... really what I'm trying to say is that you've got some good stuff happening here, but you've got to pick one path and go with that all the way
PS. Also the weightloss advert at the bottom adds a bit of real world gamer seediness... it would be even better if you added those scrolling Fling adverts they have on all the torrent sites :)
Agrajag
07-12-2009, 01:52 AM
Thanks for the comments. I would like to start by addressing the comment all over the place that it is too big. The reason that it looks huge on your gigantic 25" monitor is that all of the widths are determined based on the width of the web browser. I did all of the coding and picture drawing and stuff using an Acer Aprire One netbook, so everything would be much bigger than I visioned it on your screen. I have tried to remedy it by increasing the margins on the sides, making the whole thing a bit less overwhelmingly wide. I think it's an improvement.
another suggestion is that you could make your navigation buttons on the top look like those sticky tabs organised people tend to litter their notes with :)
That was actually the intention, but I was having trouble making an overlapping bit that lines up with the rest of the space. Look out for it looking a bit more like it was origionally hoped for in a later version. :)
Go breasts go!
Indeed
While on some level it makes sense to combine these styles, it ends up being a mixed metaphor... 5 year olds don't draw in paint these days, which makes the artist a 20-something year old MS-Paint nostalgia freak who still draws like a 5 year old. It doesn't read well... and isn't charming the way I think you intended it.
Ok, I wouldn't call myself an ms-paint nostalgia freak, but I've never really developed my drawing abilities and I am going to be 20 next year. I was really trying to emulate my normal doodling in my lecture notes drawing style and paint was the only graphics program on hand. It might work better for my intention to draw it in pen on paper and scan it in.
I'm sorry if this sounds like a lot of criticism...
Thanks so much for taking the time to type it all out.
On another note, I'm having a bit of trouble with the comments form, but I don't know if it's a problem with the programming or just the one relic aged, bugridden computer that's giving trouble on it. Could people please try out the comments form and post here if it directed to an error page?
BlackShipsFillt
07-12-2009, 08:06 AM
The comments says the "something has gone wrong" and that I should have filled out at least one field. (I filled out 3)
(Also I see the size of the website does change with the size of my firefox... So you can ignore everything I said about sizing... nice solution)
UntouchableOne
07-12-2009, 10:48 AM
Just a suggestion. If you have any knowledge in flash, it would make the site look a lot more professional. At the moment, it has a sort of amataur look, create clearer icons and images, add some nice animations to the icons and a smooth animated navigation system; and this site would really stand out. Just an idea.
Nandrew
07-12-2009, 05:59 PM
I'm not too sure about that, to be honest. I still see people making awesome stuff in raw HTML (and some pretty horrible stuff in Flash), and one of the major rules of Web design is to avoid unnecessary animation. Flash is nice, but a good head for design and careful polish are going to take this a lot further.
I can't comment on the size issue, since I'm also viewing everything from a small lappie screen. :P
UntouchableOne
07-12-2009, 07:12 PM
I agree, it all depends on the design of the web site, personally, I think with the correct atmosphere created in flash, the site could be really cool but then again, with a different aproach, it could look awesome in html too. I just think for this theme, flash would be more suited.
herman.tulleken
07-12-2009, 08:04 PM
I agree with Nandrew here - in fact, I would suggest to avoid Flash if you do not need it for some specific reason. HTML is nice and fast, easily readable by search bots, and a lot less effort if you are just starting out.
And using Flash won't solve any design problems. Here are a few quick "tricks" to quickly up the design a little (this is from a "programmer's" perspective, i.e. a quick way to get the job done. Designers: don't kill me!)
Change the body font from Times New Roman (or Serif) to Arial (or Verdana or Sans-Serif).
See if you can find a font that matches handwriting, and substitute that for the actual handwriting. This will look neater, no matter how scruffy the font is. Something like this (http://techblog.aasisvinayak.com/cool-handwritten-fonts/).
I think you should get rid of the pixel effect (for same reasons as mentioned by BlackShipsFillt) - scanning in actual hand-drawn doodles should look much better.
The lines background is jarring because it goes in and out with the text. I would suggest changing it to be plain (i.e. plain yellow) - perhaps also "sticked onto the blue with cellotype" like the header.
Perhaps frame sketches (the black-and-white ones), or make the background transparent. Also increase the contrast so that the lines are black.
On the games' page, make the images the same size.
Make the download button consistent with the site (colour wise).
If you are not a designer, my general advice is: the less variety, the better. It might be "boring", but will look cleaner.
Sometimes you can improve hand-drawn images by using an additional colour, something like this:
http://code-spot.co.za/blog/wp-content/uploads/2009/12/button_example.png
Be rough, but intentional (for example, leave bits open for highlights). But it might also look bad (especially with all the buttons combined), so check it out first. [We use this technique to improve our paper prototypes for games in reports and such when there is no time for an artist to fly in to the rescue].
Well, just a few suggestions; hope it helps!
ht
Agrajag
10-12-2009, 06:05 PM
Change the body font from Times New Roman (or Serif) to Arial (or Verdana or Sans-Serif).
See if you can find a font that matches handwriting, and substitute that for the actual handwriting. This will look neater, no matter how scruffy the font is. Something like this (http://techblog.aasisvinayak.com/cool-handwritten-fonts/).
I actually have a really nice font that would work nicely, but I'm yet to find someone who has it installed other than myself. Does anyone know if there is a way to embed a font into an html file so that it will display the font?
I also need help with the comments not working. For some reason, it seems to work all the time for some people and about half the time for others. When it doesn't work, the whole script runs fine, except for getting the information from the form where it just gets nothing. Here is the script:
<?php
$feedback_page = "comments.html";
$error_page = "comments_error.html";
$thankyou_page = "comments_sent.html";
$name = $_REQUEST['name'] ;
$email_address = $_REQUEST['email_address'] ;
$comments = $_REQUEST['comments'] ;
if ($name==""&&$email_address==""&&$comments=="")
{
header("Location:$error_page");
}
else{
$link = mysql_connect("localhost", "208866", "password withheld for security reasons") or die(mysql_error());
mysql_select_db("208866") or die(mysql_error());
mysql_query("INSERT INTO comments_table (name, email, comment) VALUES('$name', '$email_address', '$comments') ")
or die(mysql_error());
mysql_close($link);
header( "Location: $thankyou_page" );
}
?>
Am I doing something wrong?
BlackShipsFillt
10-12-2009, 07:27 PM
I don't know PHP well, but your code looks okay...
I've seen other php pages use "$_POST['name']" instead of "$_REQUEST['name']" ... obviously then the form has to specify the "Post" method ... (like "<form method="post" action="sendmail.php"> etc etc ") ... I don't know the difference between "REQUEST" and "POST" but that's the first thing I'd try.
I don't do PHP though (Programmers please don't kill me)
As a rule you cannot use unusual fonts in html... but you can save the text as images and then use it for headings and buttons (and then keep all the copy in a simple readable font like arial)... (Flash overcomes this by embedding fonts, but I think there is a consensus that Flash would only exacerbate your problems)...
this is from a "programmer's" perspective, i.e. a quick way to get the job done. Designers: don't kill me!)
That was actually some pretty sharp advice, despite it being from a programmer ;)
$_REQUEST should work fine. It eliminates the need to specify what sort your form is... (GET or POST), $_REQUEST works with either...
BlackShipsFillt
11-12-2009, 07:02 AM
Is it the form then? I can't see any reason why the php doesn't get all the variables.
UntouchableOne
11-12-2009, 08:50 AM
Make sure the form action property is 'yourPhpFile.php' and the method property is 'request'. Request allows cookie functionality, if you don't require this, rather use Post.
herman.tulleken
11-12-2009, 11:57 AM
That was actually some pretty sharp advice, despite it being from a programmer ;)
He he, all those "talks" with art people must be rubbing off...!
Chippit
11-12-2009, 04:29 PM
Everything looks good to me, except for the following line:
if ($name==""&&$email_address==""&&$comments=="")
Unless I'm misunderstanding your intentions here, surely you're looking for OR instead of AND. Otherwise it's not going to correctly stop unless all fields are missing, instead of just one.
if (($name == "") || ($email_address == "") || ($comments == ""))
So that instead. You might want to trim that too so that it doesn't accept whitespace, and throw the email through a regex test to make sure it looks like an e-mail. If you want to get that serials, of course :P
dislekcia
11-12-2009, 06:58 PM
Regexes in PHP annoy the crap out of me.
Chippit
12-12-2009, 02:05 AM
Regexes in PHP annoy the crap out of me.
****ing agreed.
Agrajag
12-12-2009, 11:56 PM
Make sure the form action property is 'yourPhpFile.php' and the method property is 'request'. Request allows cookie functionality, if you don't require this, rather use Post.
Thanks for the insight. I've changed it to post and it seems to be working on my computer, but I'm still to find out if it is completely fixed.
Everything looks good to me, except for the following line:
if ($name==""&&$email_address==""&&$comments=="")
Unless I'm misunderstanding your intentions here, surely you're looking for OR instead of AND. Otherwise it's not going to correctly stop unless all fields are missing, instead of just one.
if (($name == "") || ($email_address == "") || ($comments == ""))
So that instead. You might want to trim that too so that it doesn't accept whitespace, and throw the email through a regex test to make sure it looks like an e-mail. If you want to get that serials, of course :P
You have misunderstood my intention there (probably my own fault for not commenting my code). That particular if statement checks to see if they have either clicked submit without filling anything in or getting the variables messed up like it has been doing, and redirects to the error page appropriately. All the code to stick the stuff in the database is after an appropriate else.
As for regexes, I don't really mind what people give in terms of comments at the moment. Testing for a properly formatted email would only make sense in my mind if the email field was compulsory and I wanted it for more than if they might want a reply.
Thanks for the contribution :)
Chippit
13-12-2009, 01:02 AM
Fair enough. I was assuming you'd want all the fields to be compulsory. Because it'd let you post even if you don't enter a comment. :P
But yeah, if you're having a problem with it working in some cases but not others, I suggest you try to use $_POST (or $_GET) instead of $_REQUEST. Any unfortunately named cookie might interfere with the value $_REQUEST gives you, since it looks for GET and POST variables, as well as cookies. I'm not quite sure which order it does it in (it would actually make sense to do cookies last) , but it might be prudent to change anyway.
dislekcia
13-12-2009, 12:05 PM
I believe the order that request searches is Cookies, Post, Get. That way anything in the get string supercedes values from cookies.
Chippit
13-12-2009, 12:53 PM
I believe the order that request searches is Cookies, Post, Get. That way anything in the get string supercedes values from cookies.
I've just checked the php docs, and apparently it's configurable and depends on your server settings. So I guess it's probably not something you can rely on always being the same.
UntouchableOne
13-12-2009, 11:25 PM
@Agrajag - Just remeber when using GET, the values sent to the php file are visible to the user, so if you don't want the user seeing stuff use POST.
Powered by vBulletin® Version 4.2.4 Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.