|
| |
|
|
Sydney Saddler
Posts: 43
Joined: 1/8/2002
From: Sydney NSW Australia
Status: offline
 |
Calling all colour scheming experts! - 3/8/2003 21:53:50
Hello everyone,
Attached to this message is the CSS layout shell for the Web site that I am building.
As you can see, Web colour scheming is not my strong point and, therefore, I am hoping that one or more OutFront members will help me.
What colours would you use to brighten up this layout?
I have read many colour theory articles but, quite frankly, I am at a loss.
Most of what you see below is self-explanatory.
However, the navigation menu (containing dead NEWS links in the picture) is clever in so much that its blocks change colour upon hovering.
Any assistance would be appreciated greatly and, if anyone wants a copy of my style sheet (the layout is pure CSS and works in all browsers after a few modifications), then I can arrange to send the code to your inbox.
Cheers,
Mark
PS I own Color Schemer but, even with the assistance of that wonderful programme, I cannot decide upon a colour set.
 Attachment (1)
|
|
|
|
Gil
Posts: 7533
From: North Carolina, USA
Status: offline
|
RE: Calling all colour scheming experts! - 3/8/2003 22:01:47
Not being able to read the attachment is a small problem - How about a URL to the site?
_____________________________
Gil Harvey, 1947-2004
| |
|
|
|
Sydney Saddler
Posts: 43
Joined: 1/8/2002
From: Sydney NSW Australia
Status: offline
|
No URL - 3/8/2003 22:05:47
Hello Gil,
I uploaded the file because my site is not live and, therefore, I cannot provide you with a URL. It matters not that the text is not legible.
All I require is some assistance from a colour scheming perspective.
For example, what colour would you make the header? What colour would you make the menu, including its hovers? Et cetera, et cetera.
Cheers,
Mark
| |
|
|
|
Gil
Posts: 7533
From: North Carolina, USA
Status: offline
|
RE: No URL - 3/8/2003 23:41:58
quote:
For example, what colour would you make the header? What colour would you make the menu, including its hovers? Et cetera, et cetera.
That would be impossible to say without a lot more information; what is the site about? Is it a commercial site? A " fun" site? What are the demographics of the expected audience? and a LOT more...
Sorry...
_____________________________
Gil Harvey, 1947-2004
| |
|
|
|
Sydney Saddler
Posts: 43
Joined: 1/8/2002
From: Sydney NSW Australia
Status: offline
|
Colour schemes - 3/8/2003 23:54:09
Hello Gil,
I am building a family/personal Web site but I want it to look professional because, among other things, I am going to use it to sell myself as a bi-media journalist. So, the simple answers to your questions would be:
About? My family and my career.
Commercial? Most certainly not.
Audience? Family members and prospective employers.
I suppose that all I want to know is what colour schemes ring the bells of OutFront members. There is incredibly little in the way of simple literature on the subject for a topic with which many amateur developers struggle.
Sorry if my initial message was too vague.
The more I look at the black and white, the more I like it.
Cheers,
Mark
| |
|
|
|
Sydney Saddler
Posts: 43
Joined: 1/8/2002
From: Sydney NSW Australia
Status: offline
|
Thanks - 3/9/2003 7:35:42
Hello everyone,
Thanks for your advice. I had heard that red, black, grey and white was a popular colour scheme and, after reading your replies, I think that I will head in that direction. The tan colour also looks great. The beauty of CSS is that I will be able to make changes in an instant should I desire later.
I will go with a red header (white logo and white hyperlinks) but how do you suggest that I deploy the other colours? The problem on which I keep finding myself banging my head against a brick wall is the content areas.
Cheers,
Mark
| |
|
|
|
_gail
Posts: 2874
From: So FL
Status: offline
|
RE: Calling all colour scheming experts! - 3/9/2003 8:49:43
Ooops, I had a few suggestions but I see you' ve decided. That' s good. I can hardly even get my sites as far as you have until I decide the colors! [:j]
Still, I must ask out of curiosity, what is your thinking behind making one site for family members and prospective employers? That combo seems rather strange to me but may be I' m missing something.
gail
_____________________________
Digicamhelp - Easiest place on the web to learn about Digit@l Cameras & Photography
| |
|
|
|
Eli
Posts: 2658
From: ... er ...
Status: offline
|
RE: Calling all colour scheming experts! - 3/9/2003 17:47:59
one of the things that I do if I' m stuck is spend 1/2 hour at http://www.pixelmill.com to get my imagination working!
| |
|
|
|
Sydney Saddler
Posts: 43
Joined: 1/8/2002
From: Sydney NSW Australia
Status: offline
|
Thanks everyone! - 3/10/2003 0:40:08
Hello everyone,
Thanks for excellent advice. I will go back to the drawing board and implement some, if not all, of your ideas. The PixelMill site looks good.
I am cooling on the idea of a multi-purpose site. Just want an online area to which my wife and I can post news items. Thoroughly sick and tired of sending bulk e-mails to our worldwide social circle of family and friends.
Cheers,
Mark
| |
|
|
|
Sydney Saddler
Posts: 43
Joined: 1/8/2002
From: Sydney NSW Australia
Status: offline
|
If it is not too much trouble... - 3/12/2003 6:38:53
Hello Gail,
Just out of interest, what were your colour/design suggestions going to be?
Cheers,
Mark
| |
|
|
|
_gail
Posts: 2874
From: So FL
Status: offline
|
RE: If it is not too much trouble... - 3/12/2003 7:33:48
quote:
ORIGINAL: Sydney Saddler
Just out of interest, what were your colour/design suggestions going to be?
Of course, any color goes well with black and white. And selecting color should have some relation to your target audience, if you have one. If not, just pick a color because you like it. There are a myriad of studies on color affect.
I have to say, Mark, that I found your question one of the most delightful and artistically intriguing ones I' ve seen posted at Outfront...sorta bold, totally open ended: " Hey guys, what color, I want to know and you' re on your own telling me." lol!
Understand that I have a predilection for cool colors, specifically aquas, blues and greens. I think they look great with white and black, along with gray and browns. I don' t usually use pure neutral colors. Depending on the overall color scheme of the site, I' d incorporate a gray with a blue or green tone in it, or a warm gray with hints of brown in it, for example.
I was going to point you to these two sites for some ideas of colors to use with black on white.
http://www.ibm.com/us/
http://www.logitech.com/
If you click on several of the logitech links, you will see that they carry their white, gray and black scheme throughout the site but on each page introduce a diffferent, strong color.
gail
< Message edited by _gail -- 3/12/2003 7:37 AM >
_____________________________
Digicamhelp - Easiest place on the web to learn about Digit@l Cameras & Photography
| |
|
|
|
_gail
Posts: 2874
From: So FL
Status: offline
|
RE: Calling all colour scheming experts! - 3/12/2003 7:57:24
quote:
if anyone wants a copy of my style sheet (the layout is pure CSS and works in all browsers after a few modifications), then I can arrange to send the code to your inbox.
Oh, almost forgot.
I' ll take a copy. I know absolutely nothing about pure CSS layout so it will give me something to dissect and study. Thanks.
gail@gtbdesign.com
gail
_____________________________
Digicamhelp - Easiest place on the web to learn about Digit@l Cameras & Photography
| |
|
|
|
Sydney Saddler
Posts: 43
Joined: 1/8/2002
From: Sydney NSW Australia
Status: offline
|
Code heading your way! - 3/14/2003 2:51:59
Hello Gail,
I sent my code (CSS and XHTML) to your inbox.
Do not hesitate to contact me if you any questions.
Cheers,
Mark
| |
|
|
|
gskywalkers
Posts: 357
Joined: 3/11/2003
Status: offline
|
RE: Calling all colour scheming experts! - 3/14/2003 18:57:06
Hi Mark, I am by no means a color scheming expert but I did do a small page on using colors. Don' t be scared when it opens as it is very ugly. Just go to the url below and click on colors in the top nav bar. You might also click on backgrounds on the nav bar to the left as the background colors and images also fit into the equation http://gskywalkers.interserver.net/home/webtutorials/frontpage30.htm
Hope this is of some help to you.
| |
|
|
|
Sydney Saddler
Posts: 43
Joined: 1/8/2002
From: Sydney NSW Australia
Status: offline
|
CSS and XHTML code - 3/14/2003 22:01:00
Hello everyone,
Attached to the foot of this message is the CSS and XHTML code that recreates the page layout that I uploaded to OutFront. It is nothing out of the ordinary but works in good browsers.
Do not hesitate to contact me if you have any questions. Most of the code is self-explanatory and, should you wish, it is easy to add stuff. For example, the menu could be more intricate.
Basically, my template is the product of much CSS reading and learning from such sites as Blue Robot, The Noodle Incident, Glish and, of course, Jeffrey Zeldman' s superb site, A List Apart.
Cheers,
Mark
CSS CODE
a {
background-color: transparent;
color: #000000;
font-weight: normal;
text-decoration: none;
}
a:link {
background-color: transparent;
color: #000000;
font-weight: normal;
text-decoration: none;
}
a:visited {
background-color: transparent;
color: #000000;
font-weight: normal;
text-decoration: none;
}
a:hover {
background-color: transparent;
color: #000000;
font-weight: normal;
text-decoration: underline;
}
a:active {
background-color: transparent;
color: #000000;
font-weight: normal;
text-decoration: none;
}
abbr {
border-bottom: 1px dashed #666666;
cursor: help;
}
acronym {
border-bottom: 1px dashed #666666;
cursor: help;
}
blockquote {
text-indent: -0.5em;
}
blockquote p {
text-indent: -0.5em;
}
body, td {
background-color: #FFFFFF;
color: #000000;
margin: 0px;
padding: 0px;
}
em, i {
font-style: italic;
}
h1 {
background-color: transparent;
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 17px;
margin: 0px 0px 5px 0px;
padding: 0px;
}
h2 {
background-color: transparent;
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 17px;
margin: 0px 0px 5px 0px;
padding: 0px;
}
img {
border: none;
}
p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 17px;
margin: 0px 0px 17px 0px;
padding: 0px;
}
strong, b {
font-weight: bold;
}
.help {
border-bottom: 1px dashed #666666;
cursor: help;
}
#content {
background-color: #FFFFFF;
border: 1px dashed #000000;
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 17px;
margin: 20px 230px 20px 190px;
min-width: 120px;
padding: 10px;
position: relative;
width: auto;
z-index: 3;
}
#footer {
background-color: #FFFFFF;
border-top: 1px dashed #000000;
clear: both;
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
height: 40px;
line-height: 17px;
margin: 0px;
padding: 0px;
}
#header {
background-color: #FFFFFF;
border-bottom: 1px dashed #000000;
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
height: 79px;
line-height: 17px;
margin: 0px;
padding: 0px;
}
#header .left {
float: left;
padding: 24px 0px 0px 20px;
text-align: left;
}
#header .right {
float: right;
padding: 45px 20px 0px 0px;
text-align: right;
}
#header a {
background-color: transparent;
color: #000000;
font-weight: normal;
text-decoration: none;
}
#header a:link {
background-color: transparent;
color: #000000;
font-weight: normal;
text-decoration: none;
}
#header a:visited {
background-color: transparent;
color: #000000;
font-weight: normal;
text-decoration: none;
}
#header a:hover {
background-color: transparent;
color: #000000;
font-weight: normal;
text-decoration: underline;
}
#header a:active {
background-color: transparent;
color: #000000;
font-weight: normal;
text-decoration: none;
}
#menu {
background-color: #FFFFFF;
border: 1px dashed #000000;
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 17px;
padding: 10px;
position: absolute;
right: 20px;
top: 100px;
width: 168px;
z-index: 1;
}
#navigation {
background-color: #FFFFFF;
border-left: 1px #000000 dashed;
border-right: 1px #000000 dashed;
border-top: 1px #000000 dashed;
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
left: 20px;
line-height: 17px;
padding: 0px;
position: absolute;
text-align: center;
top: 100px;
width: 128px;
z-index: 2;
}
#navigation a {
background-color: #FFFFFF;
border-bottom: 1px #000000 dashed;
color: #000000;
display: block;
margin: 0px;
padding: 4px;
text-decoration: none;
}
#navigation a:hover {
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
}
#navigation p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 17px;
margin: 0px;
padding: 0px;
width: 150px;
}
XHTML CODE
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns=" http://www.w3.org/1999/xhtml" >
<head>
<title>World Wide Worwood</title>
<style type=" text/css" >@import " main.css" ;</style>
</head>
<body>
<div id=" header" >
<div class=" left" >
<img src=" www.gif" width=" 280" height=" 32" alt=" World Wide Worwood" />
</div>
<div class=" right" > home | <a href=" about.html" >about</a> | <a href=" stuff.html" >stuff</a> | <a href=" links.html" >links</a> | <a href=" contact.html" >contact</a>
</div>
</div>
<div id=" navigation" >
<p>
<a href=" /" >News<br /></a>
<a href=" /" >News<br /></a>
<a href=" /" >News<br /></a>
<a href=" /" >News<br /></a>
<a href=" /" >News<br /></a>
<a href=" /" >News<br /></a>
</p>
</div>
<div id=" content" >
<h1>Headline goes here</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed neque ut leo lacinia interdum. Ut ac tortor et ligula rutrum ultricies. Proin auctor gravida pede. Aenean quis ligula nec ligula ultrices vestibulum. Nam eu diam. Duis urna lorem, scelerisque ac, aliquet a, varius vitae, nisl. Aliquam ullamcorper turpis non pede. Donec massa. Sed sem lacus, ultrices eu, convallis at, accumsan quis, ante. Nunc ullamcorper posuere dui. Donec at diam. Etiam ipsum. Aenean ultricies tortor ut tellus. Sed eu lorem.</p>
<p>Mauris elementum justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ligula. Fusce ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean convallis, nisl non pellentesque venenatis, justo erat elementum neque, vitae sagittis libero turpis eu nulla. In hac habitasse platea dictumst. Donec fringilla eros ac lacus. Praesent eros purus, accumsan quis, bibendum sit amet, sagittis nec, diam. Curabitur molestie nibh ac libero. Aenean sit amet felis. Nullam viverra. Suspendisse auctor enim ut nunc. Nullam vel justo eu sapien hendrerit egestas. Nullam nec sapien. Sed arcu erat, fermentum vel, gravida nec, laoreet et, urna. Proin tincidunt massa eu mauris. Curabitur aliquet. Aenean nonummy nisl ut quam. Cras pellentesque arcu ac sem.</p>
<p>Maecenas nec dolor. Phasellus felis mi, iaculis quis, blandit vel, posuere sed, ante. Nunc iaculis. Duis iaculis justo at mauris. Aenean scelerisque accumsan dolor. Aliquam purus magna, aliquet sit amet, rhoncus sed, egestas vel, metus. Maecenas tincidunt. Quisque sapien dolor, volutpat eu, pellentesque ultrices, faucibus eget, erat. Ut ultricies commodo sem. Aenean ultrices dolor quis tellus. Quisque tempor lacus sit amet risus. Nulla neque. Nunc id ipsum. Maecenas tempus risus.</p>
<p>Aliquam a felis. Nulla laoreet aliquet dui. Quisque leo. Nam tortor odio, nonummy non, convallis quis, egestas ac, dui. In ipsum mauris, bibendum id, tincidunt in, faucibus nec, nunc. Suspendisse potenti. Nullam non justo vel ante eleifend dignissim. Nullam tempor bibendum pede. Curabitur et mi. Cras iaculis. Sed varius porttitor ante. Fusce at turpis. Praesent consectetuer. Aliquam vitae eros. Maecenas eget nibh vitae metus mattis aliquet. Duis arcu mauris, pharetra vitae, luctus ultricies, pretium eu, mi.</p>
</div>
<div id=" menu" >
<h2>Headline goes here</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed neque ut leo lacinia interdum. Ut ac tortor et ligula rutrum ultricies. Proin auctor gravida pede. Aenean quis ligula nec ligula ultrices vestibulum. Nam eu diam. Duis urna lorem, scelerisque ac, aliquet a, varius vitae, nisl.</p>
<h2>Headline goes here</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed neque ut leo lacinia interdum. Ut ac tortor et ligula rutrum ultricies. Proin auctor gravida pede. Aenean quis ligula nec ligula ultrices vestibulum. Nam eu diam. Duis urna lorem, scelerisque ac, aliquet a, varius vitae, nisl.</p>
</div>
<div id=" footer" >
</div>
</body>
</html>
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
Actually, my family site is with a free hosting service, pop-up ads and all. 
It' s been filed in my " To Do" folder; filled with other things I hope to learn in the future. 