Pretty designs

From WhyNotWiki

Jump to: navigation, search

This is where I collect examples of designs that I find pretty. (Mostly designs for web sites, since that's what I run across the most.)


Pretty designs  edit   (Category  edit)

[–] Category:Pretty designs
Nice project web sites
Nice web sites
Pretty designs
Sources


Contents

[edit] star_full.gif star_full.gif star_full.gif star_full.gif http://whynotwiki.com/skins/common/images/star_empty.gifhttp://www.urbanpuddle.com/articles/2008/01/09/install-ruby-on-rails-on-ubutu-gutsy-gibbon-apache-version

[edit] http://www.rubybyraeli.org/blog/articles/category/rails

Not altogether beautiful, but quite structured and clear.

I sort of like the way his code samples are formatted...

[edit] http://www.howtocreate.co.uk/

About site:


This site was created by Mark "Tarquin" Wilton-Jones.

Pretty page: http://www.howtocreate.co.uk/SGMLComments.html HTML and SGML comments

  • h2's have a really thick (blue) border-left (appears as a "box"), and a border-bottom; nice effect
    • h3's have a smaller (gray) border-left ("box"), and are a different color
  • Each heading has a custom (different than heading text) [anchor ID (category)] (#examples) for doing [fragment links (category)]; this ID is hidden by default but is revealed when you hover over it ([Innovative (category)]/[Clever (category)])
  • th's in tables are nice
  • Page/content is framed with left and right margins; Part of the page is fixed positioned, so it stays put when you scroll

One pre tag on the page manages to do yellow highlighting of certain characters in the source code. Here is the source:

<pre class="showimportantbits"><code><span class="moreimp"><!--</span>
<script type="text/javascript">
for( var i = 10; i &gt; 0; i<span class="moreimp">--</span> ) {
        if( myar[i].status <span class="moreimp">></span> 3 ) {
                ntlp++;
        }
}
</script>
--></code></pre>

And the CSS:

.showimportantbits { } /* (apparently not even defined) */
span.moreimp {
        background-color: #ff9;
}

[edit]

http://redistrictinggame.org/

  • Fixed-width content area is framed by a pretty/appropriate photographic background (an aerial photo of a city/neighborhood)
  • The top/header area is kind of well-done
  • Overall, it's too dark, though

[edit]

http://www.realityforge.org/articles/2005/12/02/mysql_to_postgres

  • Nice rounded corners everywhere; overall look is smooth and round
  • Nice icons: for commentary, trackbacks, leave a response, etc.
  • Nice live search feature
  • The comment threads below the post:
    • Alternates colors -- pastel green and purple -- assumable changing for original blog author and commenter
    • Comments appear in a nice non-rectangular area, like one of those boxes used in comic strips, that show what someone's saying; the "voice box" is emitted from the poster's name


[edit]

http://wikimania2007.wikimedia.org/wiki/Main_Page

[edit]

http://www.valibuk.net/

  • Nice photo of a life on the right side, with a semi-transparent navigation box on top of it.
  • The photo stays in the same place even as you scroll the page, using background-attachment fixed-width positioning
  • The pretty photo and the semi-transparent effects are they keys to this design.

[edit]

http://www.henryjenkins.org/

[edit] [Conversation threads (category)]

PunBB appears to have a pretty nice design for displaying posts in a forum [1]. Comments:

  • Each post alternates between blue and green
  • Rounded corners
  • Dark black (in high contrast to rest of box) heading box on each post gives the timestamp
  • Quoted posts have a different background color, so they stand out
  • Bad: syntax highlighting


[edit] Article metadata

There is much [duplication (category)] between this and Sources of information. Both are simply lists of web sites/pages. Sources of information is a list of sites that have good information on them, which I would like to follow/subscribe to; Pretty designs/Pretty web sites is a list of sites that are pretty. What about those sites that are both?

We wouldn't necessarily want the exact same content showing up on both of these lists, for "site A". Rather, on the one list, we just want to talk about the aspects of the site that make it a good source of information; and on the other list, we want to talk about what makes it pretty (analyze it from a graphical/aesthetic viewpoint).

Solution??

Retrieved from "http://whynotwiki.com/Pretty_designs"
Personal tools