16 sites for design inspiration

June 11th, 2008 by The Genius

Hi folks! this info comes from the website sixrevision.com:

A while back I wrote “Where to Go to Find Design Inspiration“, where I listed some of my favorite places to peruse when I’m looking for design inspiration. At the end, I posed the following question to the readers: “Where do you go for design inspiration?”, and asked that you contribute suggestions. This is a list of places that readers have recommended. Some I haven’t heard of, and several I’ve added to my own favorites list.

Without further ado – I present 16 sites that you visit for design inspiration.

1. The Best Designs

http://www.thebestdesigns.com/Suggested by: chandan (Digg profile)

I’ve written about The Best Designs before, so I didn’t list it down this time around. For those unfamiliar with the site, The Best Designs is a wonderful spot to view high-quality XHTML and Flash designs. They tag each design with relevant keywords (i.e. - Bold, Colorful, CSS) so you can narrow down your search to the particular look you’re attracted in.

2. CSS Remix

CSS RemixSuggested by: chandan (Digg profile)

CSS Remix is (according to their tag line): “A Fresh Blend of the Best-Designed Web 2.0 Sites”, though there are some non-Web 2.0 themed sites included as well. With over 14,000 RSS readers, CSS Remix is definitely a prime destination for designers looking to check out the work of other designers.

3. CSS Mania

CSS Mania - ScreenshotSuggested by: Pat of Atrick Design

CSS Mania is a regularly updated CSS-based web design gallery that includes many design genres. At present, it has over 10,000+ websites in its collection. Though the reader who suggested CSS Mania frequents this site, he warns (and I agree): “They aren’t as particular about the quality of the designs they present, but there are definitely some gems in there.

4. screenfluent

screenfluent - ScreenshotSuggested by: Damien

screenfluent is a site that features some very nice designs. What’s great about screenfluent is that it gives you a preview of the site by opening a modal window (more commonly known as a “lightbox”). There are over 7,000 featured designs so there’s not a lack of content to view.

5. Screenalicio.us

Screenalicio.us - ScreenshotSuggested by: Sachleen Sandhu of tehkubix blog

Screenalicio.us has over 9,800 designs for you to see. The users have the capability of rating each design based on a 5-star rating system and the ability to give feedback for each entry. You can sort the designs based on ratings and time submitted.

6. Open Source Web Design

Open Source Web Design - ScreenshotSuggested by: Sachleen Sandhu of tehkubix blog

Open Source Web Design is a community where users upload designs to share to the public. Downloading an OSWD design is free of charge. You can either browse their gallery of designs or download them to study.

7. One Page Love

One Page Love - ScreenshotSuggested by: adelle of Fuel Your Creativity

One Page Love is a niche web design showcase gallery that features beautiful, creative one page websites and applications. Some categories include products, portfolios, temp pages, and events.

8. FullSingle

FullSingle - ScreenshotSuggested by: adelle of Fuel Your Creativity

FullSingle is another site that displays single-page websites. The latest gallery entries are featured at the top of each page with a brief description of what the page is about.

9. One Page Folios

One Page Folios - ScreenshotSuggested by: adelle of Fuel Your Creativity

If the above two weren’t niched enough for you, here’s one with even greater specificity. It’s an aggregate of single page portfolio websites of designers and developers. There’s over 800 portfolios currently listed on One Page Folios, and each entry is reviewed before being published.

10. We Love WP

We Love WP - ScreenshotSuggested by: adelle of Fuel Your Creativity

We Love WP shares top-notch WordPress powered sites. They also showcase free themes that designers have modified into something unique.

11. CSS Divine

CSS Divine - ScreenshotSuggested by: Jess

CSS Divine is a CSS-based design aggregate website. You can do a color search by clicking on the color palette at the side bar, and it’ll narrow down the gallery to themes tagged by that particular color. There are plenty of categories including Art, Business, Clean, and Portfolio.

12. Design Snack

Design Snack - ScreenshotSuggested by: Justin Scheetz of Design Snack

Design Snack, according to their tagline, is “The designer’s showcase that you control”. Design Snack features XHTML and Flash designs. You can customize the way the designs are displayed, vote on individual entries, and browse by color.

13. SF art & design portal

SF art & design portal - ScreenshotSuggested by: cindyf

SF art & design portal is the work of the Amsterdam-based web design agency, Strangefruit.nl webdesign. SF art & design portal features hand-picked, innovative, creative art and design sites. You can browse by category, style, color, and even country.

14. Design Shack

Design Shack - ScreenshotSuggested by: stefan alexandru of Stefan Alexandru

Design Shack is an exclusive repository of first-class CSS-based web designs. They look for designs that “stand out from the crowd”. They also have a Tutorials section that features web design lessons.

15. CSSloaf

CSSloaf - ScreenshotSuggested by: CSS Loaf of CSSloaf

CSSloaf brings together designs from 35 other showcases so that you don’t have to go all over the place to see the latest designs. They feature large screenshots so that each design is visible; no need to strain your eyes on tiny thumbnails.

16. eduStyle

eduStyle - ScreenshotSuggested by: Luke Robinson (Twitter profile)

eduStyle is dedicated to the design of higher education websites for higher education professionals. It’s intended to showcase the best works of higher education designers to their peers.

Thank you for your contributions and suggestions, as well as giving me a few links to add to my collection. If your favorite sites aren’t on here, make sure to discuss it in the comments section and maybe we’ll have a follow up to this one.

Yellow form field in IE 7

May 24th, 2007 by The Genius

On a recent project I was working on A client kept complaining about yellow forms showing up randomly in IE…

“Huh?” was my initial dumbfounded response. There’s nothing in the CSS of the website that sets the colour of form elements. I checked it in Firefox 1.5 2.0 and IE 6 and 7 and never saw it, then after installing Netscape to check something for another client I went back to working that other project. And Behold there it was on the site , a form field with a pale yellow background. Not all form fields, just one apparently randomly coloured input box.

Is this due to different versions of Windows? Odd releases of Internet Explorer? Well no, as it turns out the culprit is the Google Toolbar, that widget thing that you download from Google that adds a search box and some other stuff to Internet Explorer.

There is an ‘AutoFill’ option on the Google Toolbar (switched on by default), that will ‘helpfully’ highlight form fields with certain names such as ‘email’ or ‘name’. The only thing is, I don’t think that’s particularly helpful. No software program can possibly know what are the most important fields to draw to a users attention. As the designer, I should choose how to best highlight areas and what methods I use to attract users to areas that I think are important. I certainly don’t want an automated tool messing up a carefully thought out design.

As so many people use IE and the Google Toolbar is undoubtedly popular amongst those users, this is a real issue for web designers.

The work around comes from Jenseng.com this is a javascript workaround since the Google autofill will overwrite the CSS file:
<script type=”text/javascript”><!–

 if(window.attachEvent)    window.attachEvent("onload",setListeners);    function setListeners(){    inputList = document.getElementsByTagName("INPUT");    for(i=0;i<inputList.length;i++){      inputList[i].attachEvent("onpropertychange",restoreStyles);      inputList[i].style.backgroundColor = "";    }    selectList = document.getElementsByTagName("SELECT");    for(i=0;i<selectList.length;i++){      selectList[i].attachEvent("onpropertychange",restoreStyles);      selectList[i].style.backgroundColor = "";    }  }
 function restoreStyles(){    if(event.srcElement.style.backgroundColor != "" && event.srcElement.style.backgroundColor != "#a0d0ff"){      event.srcElement.style.backgroundColor = "#a0d0ff"; /* color of choice for AutoFill */      document.all['googleblurb'].style.display = "block";    }  }//-->

</script>

and include this directly above your form:

<div id=”googleblurb” style=”display:none;”>

 You can use the AutoFill function on the Google toolbar to fill out  the highlighted fields on this form.  <a href="http://toolbar.google.com/autofill_help.html”  title=”AutoFill Help Page”>Learn more</a>.

</div>
As long as you aren’t setting any inline styles for your inputs, only people with the AutoFill feature enabled on the toolbar will see the note and the re-styled inputs (and even then only if the page actually has fields that AutoFill can complete).

CSS Print Styles

May 24th, 2007 by The Genius

Required reading: The article that “started it all”

Once you have digested that, remember to keep in mind that you can have slightly different markup for the display page and the printed page. Here’s how:

<div id="displayheader">Stuff you want only on the screen display</div> <div id="printheader">Stuff you want only on the printed page</div>

and your style sheets will look something like this:

[edit]

display.css

#displayheader { ... styles, etc. ... } #printheader { display: none; }

[edit]

print.css

#displayheader { display: none; } #printheader {  ... styles, etc. ... }

Included in this technique is the ability to have a high resolution printed graphic. In other words, the site logo can be nice and crisp, not a low-res JPG or GIF. Once again, A List Apart comes through with a great article.

An example of these techniques in action is the Out Professionals site.

As a bonus, here’s another A List Apart article on Printing a Book with CSS: Boom!.

Min-Heights that work

May 24th, 2007 by The Genius

From: http://www.dustindiaz.com/min-height-fast-hack

Assuming each and all you folk know how min-height is ’supposed’ to work, would it be all that bold that it’s safe to say that … well … can’t we just do this? (because that’s what I’ve decided to do after throwing IE5.x out the window) CSS: min-height with !important

selector {   min-height:500px;   height:auto !important;   height:500px; }

Assuming IE6 will not fix the correct implementation for the !important declaration and assuming that if IE7 does, they’ll also implement min-height correctly since at the pace they’re going they’re fixing CSS like mad crazy cows. Is that too many assumptions? But wouldn’t you agree?

The above snippet of CSS works like a charm in IE6, IE7, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

IE and transparent PNGs

May 24th, 2007 by The Genius

Easiest way to get it to work: http://bjorkoy.com/post/show/8

This technique works GREAT, but has drawbacks as is. It causes your CSS to be invalid, and causes extra work for IE7, which does properly support PNGs. The workaround to this is to have a separate CSS file that is only called from inside of an IE conditional.

<!--[if lt IE 7.]> <style type="text/css">@import url(/path/to.css);</style> <![endif]-->

You can put in the img { … } declaration as well as any others you might need for backgrounds, etc. This keeps the well-behaved browsers blissfully ignorant of the workaround and lets IE 6.0 and 5.5 do what they need to.

Web Safe Stock Photography

May 11th, 2007 by The Genius

Before using any photos in a project, even the free ones, please make sure that you have fulfilled all obligations (such as notification, links, attribution, etc. If in doubt, don’t use it! There’s no sense getting nailed over a free graphic.

stock.xchng - mostly free use (it warns you when it’s not). Larger sizes availble. Make sure you double check to see if notification or attribution is required.
User: genacom PW: 963852741
FreePhotosBank - appropriate for web-sized applications. No login required.

Photoshop Add-on

May 11th, 2007 by The Genius

Photoshop ICO plugin - allows Photoshop to understand ICO

Tips and Tricks

May 11th, 2007 by The Genius
IE and transparent PNGs - Until IE7, IE didn’t behave too well when a PNG has alpha transparency. This works around it in IE5.5 and IE6.
Min-Heights that work - More browser fun, but this is a really easy CSS hack.
CSS Print Styles - Yes, Virginia, your pages CAN display and print differently.
Yellow form field in IE 7 - Yes, there are these Mystical Yellow form fields that shows up randomly in IE7 due to believe it or not the Google toolbar, here is the JavaScript workaround.

Retrieved from “http://devserver6-unix.genacom.com/wiki/index.php/Tips_and_Tricks

Design Cheat Sheets

May 11th, 2007 by The Genius
  • Photoshop and Illustrator tutorials
  • Basic Design Principles
  • Flash Cheat Sheets

    May 11th, 2007 by The Genius
  • Flash tutorials
  • Flash Help
  • Action Script help
  • Flash tutorials