Topic: Design Study (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27402" title="Pages that link to Topic: Design Study (Page 1 of 1)" rel="nofollow" >Topic: Design Study <span class="small">(Page 1 of 1)</span>\

 
Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted posted 01-28-2006 02:41

This it not about an site review. But i do like some input about a design which i am working on at the moment.
It's about a lightweight camping club which membersl like to spend time outdoors with very few luxury. Most mebers use very small tents.

On the background you can see a picture from a little stream i made on my last holiday. All colours are taken from this picture.
As this project is in a very early stage all input is welcome. Especially about problems whci will await may when i start coding the damn site.
The design is based on some semi transparant layers which are lying on top of each other. The code will be strict xhtml-1 if that is posible.

Also be aware that a lot is sill missing in this design, things like this would be: a members login section, links to fora, a box with rss feeds from other sites etc etc. The mockup has a fixed size from 1024*768 pixels, but the site will be scalable and as liquid as possible.

Showtime

[edit] The picture is a bit grainy due to jpg compression [/edit]
.........................................................................
:: Develop yourself, develop your life, develop the world ::
.........................................................................

(Edited by Rinswind 2th on 01-28-2006 02:43)

brucew
Paranoid (IV) Inmate

From: North Coast of America
Insane since: Dec 2001

posted posted 01-28-2006 03:58

It's not the code which will give you validation trouble. It's the CSS that won't validate when you get into semi-transparency.

I like semi-transparency. I've been messing with it for a couple of years. Sometimes through the opacity filters in CSS (like here) and other times using graphic "screens" (like in the tables and sidebars here).

Until opacity filters are officially supported in the standards and those standards widely supported in the browsers that most people are actually using, no matter what method you choose, there will be compromises and weirdnesses.

For instance, in the opacity filter method, everything works fine (in current browser versions) but the issue is that when you make a div semi-transparent, everything you put into it becomes semi-transparent as well--the text, borders, images, everything. In the opacity example above, we decided just to go with it anyway, even though a semi-transparent picture of a person is a bit unsettling.

I may be misinterpreting the cascade, but I would expect that in a div with opacity of <100% that all elements included in that div would inherit that transparency, unless I turn it off (opacity = 100%) in a certain element. However, neither IE nor Gecko does this. Am I misinterpeting, or are they? Either way, it can be problem.

With the graphic screen method, that's not a problem, and the CSS validates. But no matter what your monitor resolution and dot pitch, pixels are pretty big and depending on the background colors and screen colors, it can really screw up text readability. In the example above, it works pretty well and only a critical professional eye can tell that the background screen is messing with the text, even at 9px. I've done others where the screening effect just jumps right out at you.

I like the transparency and encourage you to work with it. It's an effect that leaves a positive impression in the visitors' mind. You'll have to pick your poison with regard to which technique, but go with it.

Meanwhile, I'd love to hear of other methods of acheiving semi-transparency.

On other stuff, the color scheme is fine. The body text is a little hard for my 48-year-old eyes to read. For me, I'd suggest a san-serif or larger type size or both. I understand the argument that with smaller text you get more content "above the fold". And that's okay in a site where there isn't much content to be read.

The argument continues that "people don't like to scroll". This is where I disagree. In the bad old days before scroll-wheel mice, I'd swallow that argument. But these days, vertical scrolling is no biggie. I see ordinary, non-geek people scroll all the time. It's become a non-issue.

I don't know where you're going with the site, architecture-wise, but the one thing I see is a desire to push the envelope in one direction--semi-transparency. But it's remaining tied to 3-column convention. I'd encourage some envelope-pushing experimentation in that area as well. I've found 3-columns to be unnecessary in most sites. In many, even two columns are twice as many as are needed. Try something different here as well. You can always go back if need--rather than convention--demands it.

My two cents, for what they're worth.



(Edited by brucew on 01-28-2006 03:59)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 01-28-2006 19:46

I like green, but it looks like maybe the original picture may have had some brown in there, too. Brown's nice, too.

quote:
brucew said:

the issue is that when you make a div semi-transparent, everything you put into it becomes semi-transparent as well


http://reisio.com/temp/punkid/

zavaboy
Bipolar (III) Inmate

From: f(x)
Insane since: Jun 2004

posted posted 01-28-2006 22:54

I've looked into it a while back and came accross this: (not good with IE though)
http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

I also Googled and found this:
http://www.windgazer.nl/eexchange/transparencywillhelp.html
(Found from: http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21279742.html )

mhadxpresion
Bipolar (III) Inmate

From:
Insane since: Feb 2006

posted posted 02-06-2006 16:24

Background pictures good. It suits your club. But i think there's too much green in the design. Don't get me wrong green is good but you should perhaps add other color to it.

Postcards Printing
Catalog Printing
Brochure Printing



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu