DESIGNwalker max » inspiration

14 Slide Scripts & 20+ Cool Slide Effect Web Designs

admin — Sat, 10 Jan 2009 04:42:20 +0000

I love sliding effect. There are so many web sites that have dynamic animated sliding effect as if the site is created by flash.

For this post, you’ll see 14 Scripts to create a sliding effect and over 20 web sites that have nice sliding effects.

1. jQuery pageSlide

jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content pane.

2. Slider Gallery

This product slider is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.

demo page

3. BarackSlideshow – An elegant, lightweight slideshow script

It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.

demo page

4. Accessible News Slider

Accessible News Slider is a JavaScript plugin built for the jQuery library. It meets the accessibility requirements as outlined by WCAG 1.0.

5. Start/Stop Slider

The slider does feature a stop/start button and the animation goes a little farther than simply sliding to the left =).

demo page

6. mooSlide

Due to many requests to revamp this tool for mootools version 1.2, here you go, the slider is now available for this version, and can be downloaded

7. Coda Slider Effect

The sliding panels on the Coda is great implementation of this effect. This article will pick apart the pieces required to create the effect, and how to better it.

demo page

8. Sliding Tabs

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.

demo page

9. Coda-Slider

Coda-Slider is a tabbed sliding div type thing, like Panic have on their Coda site.

10. Creating a Slick Auto-Playing Featured Content Slider

The Coda Slider was 90% there already. There is a main content area (panels, if you will), which slide from left to right each with different unique content.

demo page

11. Build An Incredible Login Form With jQuery

What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content.

demo page

12. Carousel

The carousel component manages a list of content (HTML LI elements within a UL) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation.

demo page

13. jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order.

14. Scroll your HTML with jquery scrollable

Use mouse, mousewheel or keyboard arrows to scroll through these elements.

Slide Effect Web Design Inspirations

Using slide effect properly, you’ll be able to create following sites!

1. youlove.us

2. tap tap tap ~ tasty bits for your iPhone

3. Viget Labs Is Hiring

4. Panic – Coda – One-Window Web Development for Mac OS X

5. IL FRUTTETO

6. Lucuma | Audiovisual

7. Engage Interactive

8. Goodworks Media

9. Danny Blackman // est. 1985

10. NOFRKS.design

11. Qlear Interaction Design

12. Ann Arbor Web Design and Ann Arbor Graphic Design, by 3.7 Designs Interactive

13. Web Design Belgrade

14. www.MelissaHie.com

15. volll

16. CSS Brigit | Fuente de Inspiración

17. IJsfontein

18. sourcebits

19. VivaViralVideo.com

20. Hotel Oxford – Timisoara

21. The portfolio of Bryan Katzel

Design for Title and Headlines for your blog

admin — Wed, 26 Nov 2008 23:41:27 +0000

Title and Headlines are one of the most important Elements for the Web Design.

In this post, you’ll see some design ideas, examples and fonts for headline design.

1. Typography For Headlines

You can see over 150 headline design samples!

2. Typography for Headlines Design Showcase | Elements of Design

Here has over 100 Headline samples. This site also has more samples for comment form, login form and more web design elements.

3. 10 Examples of Beautiful CSS Typography and how they did it…

You can just copy and paste css for your headline design.

4. Headline Element Styling

That’s very simple examle.

5. Headline Elemente mit CSS stylen

You can just copy and paste CSS.

6. CSS Gradient Text Effect

That’s great CSS idea for headline design. You can make cool gradient text effect with Transparent PNG and CSS.

7. 50+ Fonts for Big, Bold Headlines

Nice Fonts for Headline.

10. 15 Amazingly Free Magazine and Headline Fonts

Here is also cool 15 font for your headline.

17 Web Design Inspiration Galleries which you can search by Color

admin — Fri, 21 Nov 2008 08:06:26 +0000

Many clients ask me to design their web sites with specific basic color.

Sometimes they already have their company logo, then ask me to design their web site based on their logo color.

There are so many Web Design Inspiration Galleries out there. But if you can find cool web sites by color.

That’s really helpful don’t you think?

Here is a list of Web Design Inspiration Galleries which you can search by Color.

1. DarkEye

2. CSS Drive

3. Designflavr

4. CSSclip

5. csswebsite

6. Joomlacreme

7. CssGlance

8. CSS Creme

9. CSSUltra

10. Design Shack

11. Hotwebber

12. CSS BLAZE

13. Design Snack

14. Web Design Gallery

15. CssLeak

16. WellDoneSites

17. CSSBarcelona

Transparent Web Design Inspirations

admin — Tue, 29 Jul 2008 05:52:22 +0000

I’ve seen cool Web Designs with Transparent PNG.

Basically IE6.0 or bellow doesn’t support a Transparent PNG.

However you could use IE PNG Fix, IE can show properly Transparent PNG.

Following site is great example for using Transparent PNG for Web Design.

Silverback

You can resize your browser width, then you could see the perspective! It’s called parallax effect.

How to recreate Silverback’s parallax effect

How to create a parallax effect for Web site is explained this site. Check this out.

CSS Gradient Text Effect

You can create greate Gradient Text effect with CSS and PNG.

GlassBox

Cool Lightbox Scripts with Transparency.

Fun with Transparent PNG Images

You can make cool effect for images as well.

Fade Out Bottom

That’s really coll fade out effect.

Creative Use of PNG Transparency in Web Design

You can be inspired for using PNG.

If you use Transparency for your Web Design, it’s gonna be really cool design.

So I rounded up some cool Web Designs with Transparency (using PNG or not PNG)

Silverback

Alex Buga

IRIS Interactive

electric pulp

The portfolio of Bryan Katzel

olliekav.com

revota

Dragon Interactive

trevorsaint.com

Heartbeat Digital

Elliot Jay Stocks

Cult-foo

soundfell.com

Enlighten Designs

Buffalo – Web design & E-commerce

Bits & Pixels

Digital Artifex

Revyver

magouya’s Blogfolio

kara burke illustrations

Inkoherence

neodar design glasgow

Rawnet.com

UI Patterns

admin — Thu, 29 May 2008 07:43:42 +0000

I really love NETTUTS which was launched coupple months ago.

You’ll see great web development tutorials on this site.

After the success of PSDTUTS, they launched this.

NETTUTS

My favorite articles on this site is…

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Create a Slick Tabbed Content Area using CSS & jQuery

It depending on your idea, you can integrate those script on your site or blogs.

I also find some UI Patterns you may be interested in.

The Highly Extensible CSS Interface

Tutorials and demos about extensible css, visual jQuery and ajax interactivity. You can download sample file!

UI-patterns.com

User Interface Design Pattern Library. UI patterns for web designers. See examples and read rationale, solutions, and implementations for each pattern.

Yahoo! Design Pattern Library

Yahoo! Design Pattern Library. Each patterns have a movie so it’s really esay to see.

Interaction Design Pattern Library – Welie.com

A bunch of Design Patterns!

Konigi

Konigi is a resource for user experience designers. They showcase examples of interface and visual design in their galleries

blink design library

Blink Interactive is a Seattle-based user experience consulting firm. Their design library is an informal collection of design examples with commentary.

Collection: [Design Solutions] | flickr

You can see flickr for design patterns as well. You may also see here or here.

40 Pricing Design Examples

admin — Tue, 06 May 2008 21:52:10 +0000

Following is 40 Examples of Pricing Designs.

Most of Pricing Designs are Table and CSS cording.

So, I think these examples are sources of design inspirations for not only Pricing Design but also table designs.

Pikiware

Crazy Egg

Media Temple

Litmus

Zendesk

DropSend

TurboTax®

Squarespace

Basecamp

TypePad

Movable Type

ConceptShare

Wufoo

fluxiom

Apple

MOSSO

Emprise JavaScript Charts

ExpressionEngine

Box.net

PlanHQ

JotSpot

SurveyGizmo

Flaremaker™

Procore

Wikispaces

LightCMS

GitHub

5pm

activeCollab

Dabble DB

ClickTale™

Joyent

Caspio Bridge Online

MediaMax

Giganews

FreshBooks

DNS Made Easy

StreamSend

FormSpring

GotVMail

Create a Cool Background Web Design with Free Photoshop Brushes

admin — Tue, 29 Apr 2008 05:24:00 +0000

One of my favorite Photoshop Tutorial site PSDTUTS. From every their post, you will see High Quality Photoshop Tutorials

Create a Sleek, High-End Web Design from Scratch

In this tutorial, you can create a high-end web design using a water color texture via Go Media’s Arsenal.

I’m inspired by this tutorial. I created some sample background designs with Free Photoshop Brushes.

Galaxie Background

Abstruct Light Background

Foliage Background

Water Color Background

You can find your favorite brush, then draw.. That’s it.

If I spend little more time for detail, it will be cool designs.

Below you will find some free brushes that I used for the sample designs.

Galaxies

Abstract Brushset X

Abstract Brushset XI

Abstract Brushset II

Gradient Splats

WaterColor .1. Brushes Pack

SimpleSmudges .1. Brushes Pack

Branches and Foliage Photoshop Brushes

Rising Sun Brushes

RisingSun brushes

Create your own font online | FontStruct

admin — Tue, 08 Apr 2008 07:48:43 +0000

You can build and share your own font online at “FontStruct | Build, Share, Download Fonts“.

Of course it free to register.

FontStruct | Build, Share, Download Fonts

It looks really fun and easy to create font.

Also, you can download fonts that other users created.

Let’s create your own font!

3D Text Effect Tutorials & Inspirations

admin — Wed, 26 Mar 2008 07:19:42 +0000

3D Text Effect using Photoshop and 3D Software is one of my curiosity these days.

Importing 3D text into Photoshop and then adds some patterns and gradients. It looks really awsome to me.

I’ve gathered up some 3D Text Effect Tutorials & Inspirations.

Tutorials

3D typographic effects in Photoshop

Taking 3D objects into Photoshop is going to get more popular thanks to the latest release of Photoshop Extended. But you don’t need Adobe’s latest high-end version of Photoshop to create some unique 3D effects – this masterclass works for Photoshop CS and above. And using Xara3D for 3D text.

Vectors with a lacing of 3D | madPotato.de

This tutorial – taking Photoshop and Cinema4D as an example – introduces you to the basic concepts and ideas of merging 2D-vector elements with a 3-dimensional modelling environment.

You can grab a gift-basket full of free wallpaper-packs as well.

Valentines Day – Photoshop Style

This tutorial is also using a Xara3D and Photoshop to create the effect.

Web Design Inspiration: Designing with Price Tag

admin — Tue, 18 Mar 2008 08:00:19 +0000

Is that a trend? I’ve seen a lot of web site designs using a Price Tag.

It’s placed a part of logo, title, menu or even whole page…

To me, a price tag is a really useful element for your site design to be more fashionable.

I just rounded up some web site designs with Price tag.