View Full Version : my first real website, designed in Inkscape
sloggerkhan
February 25th, 2008, 01:36 AM
So I have made the main outline of the first actual website I've ever made.
(Actually, I think I made one in High School a long time ago, but it didn't use CSS and was pretty sad. Even sadder than this one.)
You can see it here:
http://www.u.arizona.edu/~dsandell/html_host/index.html
Next weekend I'm probably going to add content and move the address.
(Obviously I sorta got suckered into doing this for an organization @ my school.)
I based the thing on a really simple inkscape design, which is attached, and it's all just a bunch of html/xhtml files and one CSS sheet.
Still don't have a great idea of what I'm doing, but I think I'm going to have to teach myself some scripting or something because I can already see how that'd make things 10X easier.
The one thing though, that I like, is that its become apparent that I can pretty much make a website in inkscape first, and then have the whole thing look near exactly like it without too much trouble.
Oh, and I think it passes w3c transitional xhtml validation, which is cool, I guess.
timjayko
February 25th, 2008, 02:04 AM
nice job.. looking pretty good.. I would suggest you try out kompozer (aka NVU) a very good open source web developing program
also there are some good open source web template sites around the net if you just need to throw something together
heres my website I recently started
http://www.timothykolberg.com
SpiderGorilla
February 25th, 2008, 03:52 AM
Okay, recommended suggestion...
I'm going to preface this review with some background information, so you know I'm not just being a jerk:
I've got a mild version of color-blindness that about 8% of all American Males suffer from (and I believe the world-wide percentage hovers at about 10% of all males, and around 3% of all females). And as awesome as the actual design is, the colors are intensely painful for me to look at.
To boil it all down, basically all four colors clash: The darker red washes out to gray for me, while the lighter blue causes such a severe contrast with the colors around it that it makes the over-all page lose sharpness. The darker blue and lighter red have just enough of a similar shade (with just enough red in the blue) to cause it to be literally painful to look at while my eyes try to compensate for the colors.
I'm not saying you SHOULD change your design, I'm just saying you might want to review your template for some more complimentary colors. I'm also saying this is a challenge for anyone with color-blindness. I'm not sure how it looks to normally visioned people, so I'm sure 90% of your potential audience is perfectly happy with an innovative design. The other 10% of us are in pain.
Again, I want to make sure you realize I'm not meaning to be a jerk and come down on what I otherwise feel is a solid design scheme. I'm just saying the colors are not color-blind safe and it's something you might want to take into consideration.
sloggerkhan
February 25th, 2008, 04:12 AM
it's fine. I know there are a number of flaws with it. On my comp, on one monitor the blue looks blue, on the other, it looks a bit puple. So yeah... I know some changes are in order.
sloggerkhan
February 25th, 2008, 06:08 AM
updated some of the colors. Still very much a work in progress.
mendozaro
February 25th, 2008, 06:31 AM
The design is nice. The colors thou... are not i am afraid. Google around for colors for your web site to see how important they are. Many ppl just leave a web site for the plain reason of colors and readability.
Good luck with your website.
lyceum
February 25th, 2008, 09:32 AM
Try these sites:
http://www.web-source.net/216_color_chart.htm
http://htmlhelp.com/cgi-bin/color.cgi
There are certain colors better suited for web design. These sites should help you with that. Also, you may want to play with your monitor until the colors are correct, it sounds like they are off.
Otherwise, it looks good!
:popcorn:
banago
February 25th, 2008, 11:26 AM
Colors are not ok, I agree.
Try to make them mach.
Achetar
February 25th, 2008, 11:28 AM
Okay, recommended suggestion...
I'm going to preface this review with some background information, so you know I'm not just being a jerk:
I've got a mild version of color-blindness that about 8% of all American Males suffer from (and I believe the world-wide percentage hovers at about 10% of all males, and around 3% of all females). And as awesome as the actual design is, the colors are intensely painful for me to look at.
To boil it all down, basically all four colors clash: The darker red washes out to gray for me, while the lighter blue causes such a severe contrast with the colors around it that it makes the over-all page lose sharpness. The darker blue and lighter red have just enough of a similar shade (with just enough red in the blue) to cause it to be literally painful to look at while my eyes try to compensate for the colors.
I'm not saying you SHOULD change your design, I'm just saying you might want to review your template for some more complimentary colors. I'm also saying this is a challenge for anyone with color-blindness. I'm not sure how it looks to normally visioned people, so I'm sure 90% of your potential audience is perfectly happy with an innovative design. The other 10% of us are in pain.
Again, I want to make sure you realize I'm not meaning to be a jerk and come down on what I otherwise feel is a solid design scheme. I'm just saying the colors are not color-blind safe and it's something you might want to take into consideration.
It hurts my eyes too, and I do not believe that I have partial colorblindness.
sloggerkhan
February 25th, 2008, 03:06 PM
I changed most of the colors to match either web standard colors or the UA institutional standard web colors. There are a couple I still need to tweak. Really I can't afford to mess with this too much till the end of the week.
mendozaro
February 25th, 2008, 06:10 PM
The colors are still not for my nose... thou the design is cool.
You have some css problems also... you might want to fix those.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.u.arizona.edu%2F~ds andell%2Fhtml_host%2Findex.html (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.u.arizona.edu%2F%7E dsandell%2Fhtml_host%2Findex.html)
After you fix those you can add the CSS / w3c icon to your website also :) .
pcjunkie
February 25th, 2008, 08:12 PM
The colours clash. Try looking at colour lovers and find a pattern or relational colours that match what you are attempting to do. The layout is good though. http://www.colourlovers.com/
SpiderGorilla
February 25th, 2008, 08:23 PM
It hurts my eyes too, and I do not believe that I have partial colorblindness.
I knew there was a potential for it being off for average viewers, but I cannot say for certain since I do have the impairment. I have to assume that all color problems are on my end, unfortunately.
sloggerkhan
February 25th, 2008, 08:50 PM
Some of the colors I'm stuck with because Blue and Red are the university colors and I've been told that people like the colors in use because it matches the organization. And like I said, there are still a couple I'll be changing.
I don't really get the parse errors for the css sheet. Is there a different way to reference an image? Should I be doing it by the http address of the image rather than the relative? I didn't validate my css sheet, so I guess if it's not obvious what to do with it, I'll figure that out next weekend.
littlemog
February 25th, 2008, 09:32 PM
i like it. only suggestion would be the site structure, but it's really up to who are the people mainly using it and what their feedback would be (trying asking them, much more important feedback there). like others have shared, colors are a bit odd but if you like em, you could keep them. (i know, this is against the rules but... )
good going!
backinthecity
February 26th, 2008, 04:27 AM
If your having difficulties with the different colors on different monitors/computers you may want to calibrate your monitor. Not saying you have to but if you get into design more... not sure of your involvement now, but calibrating the colors on your monitor will save a lot of headaches when printing anything and designing anything for the web.
Not being mean in any way but the colors may need tweeking a bit. cheak out http://www.colourlovers.com just get some ideas you know. Hope this helps.
-drake
Crafty Kisses
February 26th, 2008, 04:28 AM
So I have made the main outline of the first actual website I've ever made.
(Actually, I think I made one in High School a long time ago, but it didn't use CSS and was pretty sad. Even sadder than this one.)
You can see it here:
http://www.u.arizona.edu/~dsandell/html_host/index.html
Next weekend I'm probably going to add content and move the address.
(Obviously I sorta got suckered into doing this for an organization @ my school.)
I based the thing on a really simple inkscape design, which is attached, and it's all just a bunch of html/xhtml files and one CSS sheet.
Still don't have a great idea of what I'm doing, but I think I'm going to have to teach myself some scripting or something because I can already see how that'd make things 10X easier.
The one thing though, that I like, is that its become apparent that I can pretty much make a website in inkscape first, and then have the whole thing look near exactly like it without too much trouble.
Oh, and I think it passes w3c transitional xhtml validation, which is cool, I guess.
Looks pretty neat man, keep it up!
lyceum
February 26th, 2008, 06:24 AM
Some of the colors I'm stuck with because Blue and Red are the university colors and I've been told that people like the colors in use because it matches the organization. And like I said, there are still a couple I'll be changing.
I don't really get the parse errors for the css sheet. Is there a different way to reference an image? Should I be doing it by the http address of the image rather than the relative? I didn't validate my css sheet, so I guess if it's not obvious what to do with it, I'll figure that out next weekend.
This is a common problem in web design, the client needs/wants "X" and the rest of the world will hate it. I would recommend that rather than being stuck with bad colors, use them sparingly. That way they are there for the client but lightly for everyone else. My collage's colors are blue and yellow, and they have both on their site, but very lightly and tastefully (not saying you site in not tasteful) . By not overwhelming the public with their colors, their site actually looks better.
Hope that helps.
Kabezon
March 8th, 2008, 01:34 AM
Hey, I design as well =] Though I haven't been doing much lately. What do you guys think it's the best alternative to Frontpage?
st0n3cutt3r
March 8th, 2008, 02:38 AM
hey, I've got a few questions about your site.
First, I'm on a 1024x768 display (I believe still the dominant resolution), and your site is wide enough to require a scrollbar at the bottom of the page. It's not a huge deal (not much on the web is) but it is annoying that your site must be viewed at larger than full-screen on a 1024px wide display. Basically, it's discourteous to have such a wide site requiring people to browse full-screen.
As many people have mentioned, the colors MUST be changed.
Here's a monochromatic site I created recently - blue and white - that you might look at for ideas of ways to use colors. It's not perfect, and it doesn't work in some older browsers /this I know/, however it is a reasonably nice design and is easy to read and look at.
http://brian.lg-ent.com/tfs/Clever%20Cougar/works.html
Something I noticed looking at your code is that you've used a div called 'spacer' that just has a height property/background.... why not just assign a bottom margin to the navbar?
Also I noticed as I was quickly looking over it were the fact that your sidebar links become wider when you hover over them, causing the longer ones to split to two lines. You might try decreasing the size of the text to fix that.
If you want help, I'm sure the community members, myself included, would be willing to give you pointers or even go so far as assist in the design or coding of it.
Don't take this too hard, please, I know how difficult it can be to bash a website into cooperating, especially when you're not awesomely awesome with code.
Also, I don't know that anyone else has said it, but seriously, "Good job!" for not using a table for layout. Most people/schools I've encountered still use and teach it, and they are wrong for it.
If you want any help (hope I haven't scared you off) please feel free to send me an IM (contact info on my about page). I'll help in any way I can. Good luck!
argraff
March 12th, 2008, 12:30 PM
Hey, I design as well =] Though I haven't been doing much lately. What do you guys think it's the best alternative to Frontpage?
Depends what you're most interested in. If you like designing graphically first, then cleaning up code, I hear KompoZer is pretty good. I like to code from the start, so I prefer Geany. I also have a soft spot in my heart for Quanta Plus and Bluefish.
Actually, thinking about it, Quanta might be the one you want to try out first.
---
I second the notion of using the school colours sparingly. I have clients like that too, and boy...
bmeyer
March 12th, 2008, 10:45 PM
Here's a short list of color-related sites I constantly rely on when in the design phase.
If you have one color in mind and need to come up with others to complement it, try:
http://wellstyled.com/tools/colorscheme2/index-en.html
http://colormixers.com/mixers/cmr/
To make a color palette to complement a specific photo, try:
http://www.degraeve.com/color-palette/index.php
To make a color palette by analyzing another website, try:
http://redalt.com/Tools/I+Like+Your+Colors
And, to get ideas for a palette, try (among others already suggested):
http://www.colourlovers.com/
Remember that CONTRAST is undoubtedly the key!
vBulletin® v3.8.7, Copyright ©2000-2012, vBulletin Solutions, Inc.