Showing posts with label inspiration. Show all posts
Showing posts with label inspiration. Show all posts

99 Resources for Web 2.0 Design

BADGES


Web 2.0 Badges - A set of free badges to download and use in your own designs.


Fresh Badge - Quickly generate your own badge.


adClustr - Starburst badges.


Deziner Folio - A collection of different badges.


BittBox - Free vector badges.


Official Seal Generator - An alternative to the typical badge.


Photoshop Tutorial - A quick lesson on making your own badge.


Glossy Photoshop Tutorial - Create a glossy badge with this tutorial.


BUTTONS


My Cool Button - A nice online tool that will help you to quickly create the button that you want.


Adam Kalsey’s Button Maker - Simple tool to make your own buttons.


Button Maker from Blog Flux - Create your own custom button.


Brilliant Button Maker - A similar button maker to the previous 2.


CSS Buttons - Choose the text, border, and background.


Buttonator - A paid option for creating buttons.


RSS Button Maker - The name pretty much says it all.


Button Boost - A little bit different than some of the other button generators.


ButtonGenerator.com - Create buttons for navigation menus.


Crystal Button - Slick web buttons made easy.


Chicklet Creator - Create buttons that allow visitors to subscribe in their feed reader of choice.


ROUNDED CORNERS


Rounded corners are a staple in web 2.0 design. Here are some tools and scripts that will help you to quickly create your own rounded corners.


RoundedCornr


Corner Shop


Spiffy Box


Canvas Corner


Spanky Corners


Sliding Doors Text Box


Smart Rounded Corners


Rounded Corners in CSS


News List


LOGOS


Each of these tools will create a simple web 2.0 style logo.


Logo Creatr


Web 2.0 Logo Creator


Web 2.0 Logo Creatr


Web 2.0 Logo Creator


Web 2.0 Stylr


ICONS


A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.


Web 2.0 icons


UtomBox - A great collection of web 2.0 icons.


Feed Icons - The standard RSS icon.


Map Icon Factory - Create your own map icon.


Perishable Press - A nice collection of RSS icons.


Glass Style RSS Icons


Snap2Objects - Vector RSS icons.


31 Sources of Quality, Free Icons


GRADIENT IMAGES


Another common element of web 2.0 is gradient images. Here are a few tools to help you.


Gradient Image Maker


Gradient Generator


Online Gradient Image Maker (OGIM)


SPEECH BUBBLES


Speech bubbles are commonly used for styling comments or blockquotes.


Speech Bubbles from Will Mayo


Will Mayo


Bubblesnaps


CSS Play


XHTML Speech Bubbles


WigFlip


Fluid CSS Speech Bubbles


MySpace Speech Bubble Generator


Photoshop Tutorial


BACKGROUND IMAGES


Background Image Maker - Create background images with choices like transparency and gradients.


Stripe Generator 2.0 - If you’re looking to add a striped background to an element on your page, you can use this tool to customize the look you want.


Stripe Designer - Easily create striped images.


Tartan Maker - Create a tartan background image.


Texture Generator - Creates textured images that you can use as a background.


All Free Backgrounds - Choose the background you want.


COLORS


The Colors of Web 2.0 - Are you looking to match the color of a popular web 2.0 site?


Web 2.0 Color Pallete - Popular web 2.o colors.


Color Schemer Gallery - Having problems choosing a color scheme? Find one you like in this gallery.


COLOURlovers - More samples of color combinations.


Website Color Picker - Test color combinations quickly.


I Like Your Colors - Get the colors used by a particular site.


NAVIGATION


CSS Menu Generator - Easily create attractive CSS menus.


Listamatic - Collection of CSS menus.


List-O-Matic - Create your own CSS menus.


List-U-Like - Another tool to create your own navigation bars.


Tabs Generator - Create tabbed images for navigation.


Flash Buttons - Create navigation menus with flash buttons


CSS Play - An extensive collection of CSS menus.


Exploding Boy - Tabbed CSS navigation menus.


CSS Navigation Menu Generator - A tool to help you create your own menu.


FAVICONS


Favicon Generator - Create your own favicon from an image on your computer.


Favicon from Pics - Create a favicon from a photo.


Favicon Editor - Upload a photo, create a favicon.


Favicon.cc - Another option for favicons.


Photoshop Tutorial - Creating a favicon with Photoshop.


CHARTS


PHP/SWF Charts - Create attractive charts.


amCharts - Flash charts.


OTHER


Avatar Maker - Create and edit an avatar.


Shrink Pictures - Create an avatar from your photo.


ScaleNine - Collection of skins and themes created for Flex and Adobe AIR.


VectorMagic - Converts bitmap images to vector art.


Templatr - Create a layout.


PsycHo - Blog template generator.


Web 2.0 Generator - Creates layouts.


Typetester - Compare fonts on-screen.


BlogPoll - Create a free poll for your blog.


RSSxl - Convert an HTML page to RSS.


Meta Tag Generator - Easily create meta tags for your pages.


URL Rewrite - Create search engine-friendly URLs for dynamic pages.


.htacces generator - Quickly create an .htaccess file.


Thumbnail Generator - Create thumbnails for a large amount of images.


Reflection.js - Adds reflections to your photos.


Drop Shadow - Improve your images with a drop shadow.


CSS Sprite Generator - From Website Performance.


Vecteezy - Stupid name. Cool vectors.


Brusheezy - Photoshop brushes.


PSBrushes.net - More Photoshop brushes.


deviantART - Photoshop brushes at deviantART

Favorite design resources : inspiration or ideas

There are thousands of design resources on the web which can lead to an overwhelming experience when looking for inspiration or ideas, so I created a list of resources that I use on a regular basis. Here is a list of 50 design resources that can be helpful to any designer or marketer.


CSS Galleries


Sometimes it can be hard to come up with design inspiration. CSS galleries are a great place to get design inspiration and they can also be leveraged as a great source of traffic. If you can get your design on these galleries it can drive thousands of visitors to your website.


Unmatchedstyle

cssBeauty

cssvault

Stylegala

CSS Drive

css thesis

Styleboost

CSSElite

CSS Import

Web Creme

CSS Mania

DesignShack


Web Standards


Designing with web standards is a great way to keep your code clean and search engine friendly. Why design a site with a 1000 lines of code when it can be done in 100 lines of code.


Developing With Web Standards - This document explains how and why using web standards will let you build websites in a way that saves time and money for the developer and provides a better experience for the visitor. Also discussed are other methods, guidelines and best practices that will help produce high-quality websites that are accessible to as many as possible.

Roadmap to Standards

Web Standards Project - The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.

Web Standards Checklist

Importance of Web Standards


Validators


Now that you know all about web standards, here are some tools that can help check if your site is compliant. These tools will also help you find errors in your code.


HTML & XHTML Validator

CSS Validator


Usability


Usability is probably the most important factor in a website design. Making your website usable can help improve the experience for your visitors as well as help improve your conversion rate.


What is usability

Usability First - An approach to web design which emphasizes usability.

Weblog Usability: The Top Ten Design Mistakes - Blogs are often too internally focused and ignore key usability issues, making it hard for new readers to understand the site and trust the author.

Web Design & Usability Guidelines - An 18 part online book that goes over usability and design guidelines.

Web usability - the basics

The Culture of Usability - How to spend less and get more from your usability-testing program.

90% of All Usability Testing is Useless

Ten deadly sins of web design - A list of ten huge mistakes no web designer or developer should be caught making.

Information architecture resources

Usability Views - Usability with a twist.


Blogs/Resources


Blogs are a great resource for up-to-date information on design and usability. Here is a list of blogs that you may want to subscribe to or read on a regular basis.


Stopdesign

Signal vs. Noise Blog - A design and usability blog by 37signals.

Digital Web Magazine - Digital Web Magazine is an online magazine intended for professional web designers, web developers and information architects. The magazine consists primarily of work contributed by web authors, as well as by others who occasionally delve into the web realm. We put emphasis on and provide recognition for contributed work. The Magazine is recognized by nearly all of the major web design agencies in the industry.

A List Apart - A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

456 Berea Street - This is a site by Roger Johansson who writes articles on web standards, accessibility, or usability in one way or another.

mezzoblue - A semi-daily expository and exploratory on all things web, design, and typographic. It is also a personal portfolio site with works in any creative discipline the owner feels fit to publicize.

Adaptive Path

Jesse James Garrett - The blog of the founder of Adaptive Path.

Jeffrey Veen

Your Total Site - YourTotalSite touchs on a wide range of subjects that include usability, accessibility, visual design, online marketing, (X)HTML & CSS, JavaScript, Information Architecture, and more.

IxDG Resource Library - A repository of information about interaction design.

Apples to Oranges - A blog by Ryan Nichols.

Demystifying Usability - A blog by Frank Spillers, a usability consultant.


Color Resources


Color is an important factor in design. Color can separate your site from your competition and it can also convey a specific message to your visitors. If you provide a personalized service you may want to choose colors that are soft and personal or if you want a corporate look and feel you may want to pick hard colors. Here are several resources that I use to help me make color decisions.


Color Schemer - Online color scheme generator.

Color Meaning - An article that explains the symbolism and meaning of different color types.

The Meaning of Color in Web Design - How colors influence audiences when marketing products through the Internet.

Symbolism of Color

Color Matters - Explore how color affects emotions, appetite, vision, sexuality, design, and art.


Typography


There are many different types of fonts and they can greatly affect how readable your site is, so choose wisely.


1001 Free Fonts - A large selection of true type fonts for Windows and Macintosh.

The Anatomy of Web Fonts

Typetester - Typetester is an online application for comparison of the fonts for the screen. Its' primary role is to make web designer's life easier.

Innovative and Experimental CSS Examples, Techniques and demonstrations

CSS doesn’t always have to be serious business. In this article, you’ll see 25 fun, novel, and experimental CSS techniques and demonstrations.

Note: some of the techniques and examples discussed here may not validate, cannot be rendered correctly by some browsers, and may not conform with standards-based design and development. Many of the techniques shown here are for exploration only.

Transparent CSS Menu Drop-down

Transparent CSS Menu Drop-down screen shot.

This demonstration showcases how to create an advanced CSS drop-down menu with transparency support (needs JavaScript for IE6 PNG transparency support).

Return of the image maps

Return of the image maps screen shot.

In this example, you’ll see a nifty way to create CSS-based image maps with bubble tooltips.

CSS 3D puzzle

CSS 3D puzzle screen shot.

This 3D puzzle was created using only CSS (this must have taken a LONG time to create).

CSS scrolling image map

CSS scrolling image map - screen shot.

This example involves a panoramic picture with "hot spots". Clicking on the hot spots displays a description and an zoomed-in image of the area on another panel.

CSS Decorative Gallery

CSS Decorative Gallery screen shot.

Demo: CSS Decorative Gallery

Web Designer Wall shows us how to create fancier image galleries by using background images on images.

Playing Cards with CSS

Playing Cards with CSS - demo - screen shot.

Demo: Playing Cards

This example uses special HTML characters to display the suits of the cards and then CSS to style and position them.

Homer CSS

Homer CSS - screen shot.

In this example, Román Cortés recreates Homer Simpson with HTML characters/text and CSS. Check out the animated adaptation by Ned Batchelder.

CSS House

CSS House - screen shot.

Demo: CSS House

Design Detector created this house by using Div’s and styling them with CSS.

“Secret Message” with CSS Positioning and Transparency

Secret Message screen shot.

Demo: Secret Message

This example by Chris Coyier of CSS-tricks reveals a "Secret Message" as you scroll down the web page.

How to create light-weight drop shadows

light-weight drop shadows screen shot.

Demo: light-weight drop shadows

This example uses PNG’s (and transparencies) to apply drop-shadows to Div’s. This won’t work in IE 6 without JavaScript.

Multi-position shadow boxing

Multi-position shadow boxing screen shot.

Here is another method for applying drop shadows to page elements (such as images).

Complexspiral

Complexspiral screen shot.

In this demonstration, CSS guru Eric Meyer shows some transparency/opacity capabilities of CSS.

DVD Recorder Remote

DVD Recorder Remote screen shot.

Design Detector creates a remove control using HTML elements and CSS.

Drawing the line

Drawing the line screen shot.

Stu Nicholls of CSSplay draws a pencil using CSS. Hovering over the pencil will draw a horizontal line.

CSS Text Shadows

CSS Text Shadows screen shot.

Here is a pure CSS-based solution to applying drop-shadows to text. It involves duplicate text layed on top of one another, which isn’t good practice.

CSS Flashy Links

CSS Flashy Links screen shot.

In this navigation bar example, hovering over a menu item causes the arrow on the left to zoom across the menu item.

Map Pop

Map Pop screen shot.

This example showcases CSS image maps through a map. Hovering over hot spots reveals more information on the right.

Pure CSS Popups

Pure CSS Popups screen shot.

This technique involves hidden Div’s that are revealed when you hover over the trigger link.

CSS Sticky Footer

CSS Sticky Footer screen shot.

Here’s a footer that is fixed at the bottom of the web page, regardless of height.

Scalable Star

Scalable Star screen shot.

Using CSS, a simple shape (star) is drawn. It scales when the user resizes the font size using browser controls (at least for modern browsers it does).

CSS: Menu Descriptions

CSS: Menu Descriptions screen shot.

In this CSS-based menu, hovering over a menu item reveals more information about the menu item.

CSS Gradients Demo

CSS Gradients Demo screen shot.

Demo: CSS Gradients Demo

This demonstration uses CSS-styled empty Div’s (not a good practice) and background-colors to mimic the effect of gradients.

Scaled Background Image

Scaled Background Image screen shot.

Demo: Scaled Background Image

Here is a technique for scaling background images (resize your browser to see how it works).

CSS Vertical Bar Graphs

CSS Vertical Bar Graphs screen shot.

This example styles list items to create an accessible bar graph.

CSS Gradient Text Effect

CSS Gradient Text Effect screen shot.

Demo: CSS Gradient Text Effect

This technique adds flare to text by super-imposing PNG images onto them. It requires alpha transparency so it won’t work in IE 6 without JavaScript.

Best CSS Magic and inspiration web design gallery list

Below you’ll find a brief overview of css-galleries you can explore inspiration from.
  • CSS Beauty
    CSS
    Beauty focuses on providing its audience with a database of well
    designed CSS based sites, as well as news and happenings on the CSS
    Design Community. It showcases designers work and serves as inspiration
    for those looking to build CSS based websites.
  • CSS Blast
    Russian CSS Showcase
  • CSSBloom
    CSS Gallery with Blog’s and Online Portfolio’s
  • CSSGreen
    CSS Gallery Of Great Design and valid Web SitesScreenshot
  • CSSBrain
    CSS gallery with comments.
  • CSS Clip
    Web Design Inspiration and Gallery
  • CSS Collection
    CSS collection web sites without tables
  • CSS-Demo
    CSS Showcase
  • CSS Design Yorkshire
    A gallery of CSS web design in Yorkshire UKScreenshot
  • CSS Drive- Categorized CSS gallery and examples
    CSS gallery, code samples, tutorials, and moreCSS Collection
  • CSSelite
    We
    are glad you like our site, that’s why we save every single entry we
    make so you can get real inspiration from the best of the bests!
  • CeeSeS
    CSS Gallery - We are the BalkaniCSS!
  • CESKO
    CSS Showcase - Slovenia
  • Creative-Pakistan
    Creative-Pakistan.com is a platform to showcase web and CSS designs of creative Pakistani web desginers
  • CSSFill
    CSSFILL provides free CSS based layouts and templates
  • CSS Galaxy
    CSS Gallery with voting and comments.ScreenshotCSS Hazard
    CSS Inspiration and Gallery
  • CSS Heaven
    CSS
    Gallery - submit your own css design and view a gallery full of
    creative design inspiration. The submitted designs can be rated
  • CSS ImportCSS
    The no-frills CSS GalleryScreenshot
  • CSS-Mania
    CSSmania, the most updated css showcase all over the globe
  • CSS Princess
    CSS
    princess is showcase gallery of beautiful css sites. You can find web
    sites primarily done completly with css , without tables.
  • CSS Reboot
    CSS
    Gallery - The CSS Reboot is a community event for web professionals and
    enthusiasts. This November 1st at 18:00 GMT Rebooters from all over the
    world will launch their web standards-based redesigns
  • CSS Remix
    A Fresh Blend of the Best CSS Web Design
  • CSS smooth operator // Tite site collection
    Tite site collection, conforms to Web Standards and designed with CSSScreenshot
  • CSS Thesis
    A Gallery of CSS based web sites, ranked by votes.
  • csstux - The best dressed sites on the web
    A gallery of inspiring web site design and resources, focused primarily on sites using cascading style sheets.
  • CSS Vault - The Web’s CSS Site
    A repository of sites using cascading style sheets and a list of resources
  • CSS Website
    Gallery of Css Design Website. Submit your site.
  • CSS Zen Garden: The Beauty in CSS Design
    A demonstration of what can be accomplished visually through CSS-based design. Classic!Screenshot
  • Data Tables and Cascading Style Sheets Gallery
    The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
  • Design Shack - Inspirational CSS and Blog Design
    Design
    Shack offers regular examples of great CSS, standards based design to
    help inspire and create. We feature any website which shows off some
    flair, and doesn’t fit into the standard pattern we come to expect from
    CSS design.
  • Liquid Designs
    Liquid Designs is a gallery of websites designed with liquid layouts using XHTML and CSS
  • Piepmatzel
    collecting best practice web standards design examplesScreenshot
  • Proestilo
    CSS/XHTML Gallery all standard complient.
  • showcase GR
    The best of Greek CSS web design
  • Standards Reboot
    Standards
    Reboot is all about the use of standards in web design. This site was
    built to take a back seat and showcase your talent.
  • Style Crunch
    StyleCrunch is a css and standards websites gallery
  • Stylegala - Web Design Publication
    Stylegala
    is an online resource and inspiration guide for web agencies, designers
    and developers who take interest in websites that combine the powers of
    design, web standards and CSS.
  • Submit CSS
    Submit your own css design and view a gallery full of creative design inspiration
  • Unmatched Style
    Unmatched
    Style is a constantly growing community dedicated to acknowledging
    those who have made exceptionally gorgeous web sites using Cascading
    Style Sheets and web standards. By recognizing these exceptionally
    beautiful designs, other designers and businesses can get inspired and
    find a direction they may wish to take with their own web sites.
    Screenshot
  • W3 Compliant Sites: Sites designed to comply with W3C Web Site Standards
    A collection of web standards compliant web sites and their designers
  • Webdigity
    CSS gallery

  • Awarding web sites that successfully combine form and function
  • Well Designed CSS Sites
    Andy Budds List of well styled sites.

Best web 2.0 css templates websites collection