Posted by: Randeep Singh | July 26, 2011

Example Sites for Muse

Sample sites that Muse 1.0 will target

Thumbnail Notes
Good example of the different ‘Browser Fill’ areas…AKA, 100% width
Another sample portfolio site from squarespace. See more here
Blog and portfolio on Squarespace
  Single Page example sites 
List of sites where all the content on 1 page, visually our target, but implementation (animated scroll with ancor links, text rotation, text drop showdow…) not always entirely within our reach for v1
  Capitano GoodBarry  Capitano Analysis
  Capitano BC ]
  50 typography and grid focused sites
  Design Snack 
Nice site where the community submits and votes on examples of compelling web design.
  2009 Web Design Trends, Part 1 
  2009 Web Design Trends, Part 2
Nice site on a relevant topic. (I bought the book!) Note that they used pixels for their typography. Also note the sample pages that open up as an overlay, a.k.a “Modal Pages”, on the main page instead of spawning a new window or taking the viewer to another page.
This site only has two pages! (Ok, actually it has four pages if you include the News and FAQ pages.) The shopping experience is drop dead simple. Note the remote rollover buttons on the main page that each load a different sample video.
Another eCommerce web site. Sells “stickers” that you apply yourself to IKEA furniture. Simple site with image previews, shopping cart, Flash animation on the front page, etc.
Another simple web site for someone who’s created a side business. A perfect example of a Godiva powered site. Note the social media widgets on the right, as well as the fact that they are using Google Checkout as their shopping cart solution.
Here was one I clicked on that I thought a designer should be able to create with Muse, especially leveraging Godiva.

I placed a snapshot plus a zip of the assets here Sample Site Snapshot
Something a print designer might come up with. Non-rectangular background header image that bleeds into regions below it. Absolutely positioned badge in the upper right corner of the page. The background header rotates so its different each page load. I archived some snapshots here:– Kin

  Basic blog page but it demonstrates a common design nicety – making the corners of one region bleed into another.
Posted by: Randeep Singh | July 26, 2011

Web sites: Design Techniques and layouts

Design Techniques

Link 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. 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. Use the drop down at the top to browse themes) 40 css layout templates Web Design Treands for 2009
  • 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?
  • I’ve heard that most designers create designs against a 960 pixel wide page, hence the 960 in

, and use some sort of grid technique to keep things spaced out consistently, etc. Grid design Grid design for columns Javascript based switching between multiple fixed or liquid layouts By changing just the stylesheet, it provides designers lots of examples of what is possible to do within the constrains of web design A collection of common patterns used in web-design. For inspiration, no code included Recent article on state of searchability WRT Ajax and Flash Gives a description of fixed, fluid and elastic layouts, and the pros/cons of each. effective techniques to create 100%-functional adaptive CSS-layouts Site devoted to typography on the web
CSS Techniques Faux columns – making columns appear as if they are equal in height. Equal height faux columns using a clear method. CSS3 method for liquid faux columns. Liquid layouts with negative margins. A technique that allows you to create tabs that can grow to accomadate wide content or large fonts. 45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know Web Design is 95% Typography Setting Type on the Web Baseline Grids with CSS Sizing Text in CSS Yes another grid system


Posted by: Randeep Singh | July 26, 2011

Web site design Best practices

Best Practices

Link Progressive Enhancement Unobtrusive JavaScript Some real world examples of Progressive Enhancement Examples of unobtrusive JavaScript The author talks about the document semantics that are introduced with HTML5 and how it falls short. W3C Mobile Web Best Practices Mobile Stylesheets W3C Web Accessibility Initiative Site W3C Web Accessibility Initiative Best Practices
Posted by: Randeep Singh | July 8, 2011

Protecting your HTML code from being stolen

How to Respond to Copyright Violations:

Posted by: Randeep Singh | July 6, 2011

Bollywood Trailors

Posted by: Randeep Singh | June 24, 2011

You Tube video scripts for websites






Interactive YouTube API Demo Beta

This page lets you explore the YouTube Data API by generating and executing different types of API requests and viewing the API responses for those requests.
Copy and paste Your Tube code generator




Posted by: Randeep Singh | January 12, 2011

iPhone and iPad Design Templates

Posted by: Randeep Singh | January 12, 2011



Posted by: Randeep Singh | January 12, 2011

Work ethics – Work better Live Better

Posted by: Randeep Singh | June 17, 2010

Logo Design Inspiration

Older Posts »