Posted by: Randeep Singh | July 26, 2011

Example Sites for Muse

Sample sites that Muse 1.0 will target

Thumbnail Notes
  http://www.designmadeingermany.de/magazin/5/
  http://designersmusic.com/
Good example of the different ‘Browser Fill’ areas…AKA, 100% width
  http://ataricharm.com/
Another sample portfolio site from squarespace. See more here
  http://raygun.com/
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
http://flat.com/
  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 
  http://typedeskref.com
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.
  http://myibend.com
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.
  http://grippiks.com
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.
  http://www.mysuitestuff.com
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.
  https://www.memolio.com
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 Memolio.com

  http://www.sfzoo.org
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:

http://dreamweaver.macromedia.com/people/jblas/RnD/Muse/SamplePages/sfzoo.org/– Kin

  Basic blog page but it demonstrates a common design nicety – making the corners of one region bleed into another.
http://www.blackestate.co.nz
http://www.ste-michelle.com/
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

 

Posted by: Randeep Singh | July 26, 2011

Web site design Best practices

Best Practices

Link


http://en.wikipedia.org/wiki/Progressive_Enhancement Progressive Enhancement
http://www.alistapart.com/articles/understandingprogressiveenhancement/  
http://www.alistapart.com/articles/progressiveenhancementwithcss/  
http://www.alistapart.com/articles/progressiveenhancementwithjavascript/  
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript Unobtrusive JavaScript
http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.html Some real world examples of Progressive Enhancement
http://labs.adobe.com/technologies/spry/articles/best_practices/separating_behavior.html Examples of unobtrusive JavaScript
http://www.alistapart.com/articles/semanticsinhtml5/ The author talks about the document semantics that are introduced with HTML5 and how it falls short.
http://www.w3.org/TR/mobile-bp/ W3C Mobile Web Best Practices
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet/ Mobile Stylesheets
http://www.w3.org/WAI/intro/aria.php W3C Web Accessibility Initiative Site
http://www.w3.org/TR/wai-aria-practices/ W3C Web Accessibility Initiative Best Practices
Posted by: Randeep Singh | July 8, 2011

Protecting your HTML code from being stolen

http://www.htmlguard.com/index.html

How to Respond to Copyright Violations:

http://www.htmlguard.com/articles/how-to-respond-to-copyright-violations/

Posted by: Randeep Singh | July 6, 2011

Bollywood Trailors

http://www.top10bollywood.com/

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.
http://gdata.youtube.com/demo/index.html
Copy and paste Your Tube code generator 
http://www.yvoschaap.com/youtube.html

 

 

 

Posted by: Randeep Singh | January 12, 2011

iPhone and iPad Design Templates

http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/iphone-design-templates/

Posted by: Randeep Singh | January 12, 2011

Portfolios

http://www.krop.com/creativedatabase/

 

Posted by: Randeep Singh | January 12, 2011

Work ethics – Work better Live Better

http://workawesome.com/

http://freelanceswitch.com/resources-directory/

Posted by: Randeep Singh | June 17, 2010

Logo Design Inspiration

Older Posts »

Categories