Posted by: Randeep Singh | July 26, 2011

Web sites: Design Techniques and layouts

Design Techniques

Link


http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=1 CSS support and implementation varies amongst the different browsers. Adobe launched a community driven site back in the CS2 time-frame with the goal of collecting the various issues and workarounds that arise when trying to use CSS. It has a great collection of browser CSS bugs, along with descriptions of what triggers them.
http://www.designsnack.com/ Provides thumbnails of nice web sites. The design community gets to vote on the sites, add comments, mark their favorites, etc. Pretty handy resource for us.
http://demo.rockettheme.com/  
http://www.templatemonster.com/  
http://www.freecsstemplates.org/css-templates/ Use the drop down at the top to browse themes)
http://www.smashingmagazine.com/2007/02/14/free-design-templates/
http://www.smashingmagazine.com/2008/12/01/100-free-high-quality-xhtmlcss-templates/
http://www.smashingmagazine.com/2009/04/11/20-beautiful-free-and-commercial-joomla-templates/
http://www.smashingmagazine.com/2009/01/25/35-free-high-quality-e-commerce-templates/
http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/
http://blog.html.it/layoutgala/ 40 css layout templates
http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/ Web Design Treands for 2009
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  • A big part of what Muse will do is slice up the imagery used on the page and generate image assets. We should generate CSS sprites whenever possible so that we can reduce the number of hits to the developer’s site and reduce flashing on interactive elements. – Another key thing to think about is that some of the images used within sprites are over-sized to accommodate the case where someone with a vision disability pumps up the font-size … how would we support this given the fact that the imagery used in a design is only big enough to make the normal case look good?
http://960.gs/
  • I’ve heard that most designers create designs against a 960 pixel wide page, hence the 960 in http://960.gs

, and use some sort of grid technique to keep things spaced out consistently, etc.

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ Grid design
http://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/ Grid design for columns
http://www.alistapart.com/articles/switchymclayout Javascript based switching between multiple fixed or liquid layouts
http://www.csszengarden.com/ By changing just the stylesheet, it provides designers lots of examples of what is possible to do within the constrains of web design
http://patterntap.com/ A collection of common patterns used in web-design. For inspiration, no code included
http://searchengineland.com/google-io-new-advances-in-the-searchability-of-javascript-and-flash-but-is-it-enough-19881 Recent article on state of searchability WRT Ajax and Flash
http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/ Gives a description of fixed, fluid and elastic layouts, and the pros/cons of each.
http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/ effective techniques to create 100%-functional adaptive CSS-layouts
http://typesites.com/ Site devoted to typography on the web
CSS Techniques  
http://www.alistapart.com/articles/fauxcolumns/ Faux columns – making columns appear as if they are equal in height.
http://www.positioniseverything.net/easyclearing.html Equal height faux columns using a clear method.
http://www.css3.info/liquid-faux-columns-with-background-size/ CSS3 method for liquid faux columns.
http://www.alistapart.com/articles/negativemargins/ Liquid layouts with negative margins.
http://www.alistapart.com/articles/slidingdoors/ A technique that allows you to create tabs that can grow to accomadate wide content or large fonts.
http://www.alistapart.com/articles/slidingdoors2/  
http://www.tripwiremagazine.com/tools/design/45-css-grid-systems-layout-generators-and-tutorials-that-every-designer-should-know.html/ 45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know
http://informationarchitects.jp/the-web-is-all-about-typography-period// Web Design is 95% Typography
http://www.alistapart.com/articles/settingtypeontheweb Setting Type on the Web
http://csshowto.com/typography/css-the-baseline-grid/ Baseline Grids with CSS
http://www.alistapart.com/articles/howtosizetextincss/ Sizing Text in CSS
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1 Yes another grid system

 

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: