While it would be impossible to list all such tricks, this post humbly attempts to list a few of the favorites I could recall. Included are resizing and positioning tricks, animations and Javascript trickery. These techniques are unique (or rare) to the best of my knowledge, and have not been discussed anywhere by their designers, please correct me if I’m wrong. Also, don’t forget to suggest any other innovative tricks you have noticed, I’ll add them to part two of this post to be published later.

Paulicious: desktop-like design

A remarkable theme that loads everything via AJAX, and presents content in a desktop-esque feel. You can even choose from a few different wallpapers (click the icon on bottom left corner). The icons are links to posts and videos that the author has choosen to be on the desktop. When clicking on an icon, the post content comes up in a resizeable, draggable window. You can also minimize the ‘windows’ and bring them up again (you can see a few windows I’ve minimized, in the screenshot above).

Will someone ask him to release the source so that we can all learn from it? :)

Dev Thought: clouds and sky

Devthought has draggable, moving, animated clouds and sky, probably depending on real-world climate (I say this because unfortunately, while taking the screenshot, the clouds were not present – damn the sun and bright skies).

HelloWorld.show

I have not described this design in the title for a lack of better words, but the boxes on the page move around depending on how you move the mouse over them. The box over which you hover also pops up with more brightnes. Mouse coordinates are shown live on the top left corner.

iTheme: customizable, drag-drop sidebar

iTheme was one of the earliest WordPress themes to use Javascript for some serious pizzaz – you can rearrange the sidebar boxes, and the theme will remember it.

Icondock: drag-drop shopping cart

Icondock has a shopping tray to which you can load icons for purchase (by clicking plus buttons on icons), and the preview will load in the shopping tray, and the total price of purchase will be updated real-time – all without reloading the page.

Zaum&Brown: moving text boxes

The info boxes are pushed down when you resize to a lower width, and they come back up when resized to a larger width.

ifElse.co.uk: Resolution-depended sidebars

When you resize to a width just more than required for the first two columns of ifElse, the right sidebar repositions itself to a footer. For larger resolutions, the footer is absent, and the sidebar is visible.

An original article by Design Blurb

7 examples of innovative effects and techniques in webdesign

After you have finished the design of a site, you can preview how it looks on an iPhone, Wii browser, and various resolutions (from 800 x 600 all the way to 1920 x 1200).

The preview system is powered by AJAX, so switching between various resolutions is slick and easy (and requires no page loads).

It may not be an accurate representation (especially for the iPhone and Wii browser), but ViewLikeUs can help you get an idea of what needs to be tweaked. For example, I realized that lack of lateral margins in the design of Design Blurb (this blog!) makes it ugly on an iPhone (see image above) and low-res screens.

Do you use any other websites or apps to preview your site in lower resolutions? Recommend your favorites in comments.

An original article by Design Blurb

Preview sites in various resolutions with View Like Us

I started learning PHP recently, with the aim of building my own web apps and CMS some time in the future. Finding ideal, free resources were not easy, and delayed the learning process quite a bit. This post serves as a one-stop-shop for resources that I found useful – if you have recommendations, please do so in comments.

Install PHP on your computer for local dev/testing

PHP.net has a detailed page on installing PHP for various OSes. On *nix systems, you only need to learn how to use PHP, as it is installed by default or easily available via package managers.

PHP beginner resources

W3Schools has detailed articles and even a quiz for PHP topics – describing everything from PHP language constructs and syntax to database access.

Zend Dev Zone has a beginners’ guide to PHP – categorized to 15 parts.

I should admit, while reading through the above articles, I did hit brick walls quite a few times. On such occasions, the Diving into PHP video series by Themeforest blog helped greatly. Sometimes, a visual explanation makes sense of something that you couldn’t figure out even after spending several minutes on.
That page lists only the first 11 videos, you can view the remaining videos with this search page.

Bonus tips: Use PHP.net, W3Schools forum and Google to lookup answers when you have doubts. It may seem obvious, but a lot of people waste their time thinking rather than trying to solve problems (myself included, in early days).

PHP books

These are not free, but I thought that they should be included due to one reason – if you have lots of time to spare, while on a commute to work or such, books can help. Reading books is not as effective as diving into code itself, but if you can spend more time on a book than on your computer, this might be useful.

O’Reilly has books called Learning PHP 5 and PHP Cookbook (which contains practical problems and solutions).

Also, this thread on Stackoverflow has lots of recommendations and critiques of PHP books. Stackoverflow is frequented by knowledgeable programmers, so you can be sure they know what they are talking about.

This post discussed only websites and resources to get started with PHP. Soon, I will also be writing posts rounding up useful resources for those who know the syntax and basics, and are looking for intermediate/advanced tips, security tips and well-coded PHP applications that can help you learn best practices. Click the email/RSS link in the box below to subscribe for updates regarding the same.

An original article by Design Blurb

Best free PHP learning resources for beginners

Related reading:

• “Sketchy” Design Resources
• Grunge Resources Found on deviantART
• 40 Great Web/Graphic Design Resources

You may also want to look at our Textures category, which includes free textures we give away, and links to other texture resources.

The textures are free for personal and commercial use, with no attribution required.

Unlike other texture resources that simply show new textures in a list or preview format, Lost and Taken is a real blog, with RSS feeds, and chronological order of posts. This means that you can subscribe to their RSS feed. Perhaps the only downside is that you cannot view too many textures at once, or look at textures by category (like on previously featured Texturewall).

Lost and Taken was started by photographer (and later self-taught web designer) Caleb Kimbrough – you can read all about how the site was born, on their about page.

Update: Caleb informs that Lost and Taken textures can be viewed in gallery form at Zen Textures, which is also linked from Lost and Taken as the link ‘Gallery’.

An original article by Design Blurb

Lost and Taken: Free, copyright-free stock textures

Related reading:

• Nice Cork Texture – Free Download at stock.xchng
• 20 Free Fabric Textures
• 30 Free Cardboard Textures

Icon Finder has a clean and minimalist design. Thankfully, the site is not stuffed with ads – there are just a couple of private ads and an AdSense unit at the bottom of the site. One can only hope that this lack of advertising does not cause the site to be closed down in future.

Searching for some typical keywords (like computer, camera etc.) turned up relevant results. The accuracy of results would probably depend on the type of keywords used. The quality of results found by search was not amazing, but browsing the icon packs (link to which is on home page) turns up quite a few good icons.

There are a few options to be tweaked while searching for icons – number of icon previews to be listed per page, background color and size of icons.

On clicking through to an icon’s download page, you can see more details about the icon – including name of designer, license, and whether it is part of any icon set (in which case, a link to the icon set is also displayed).

Other sizes and versions of the icon, and other icons from the same icon set are listed after this, so that you can explore further in case the icon in question does not satisfy your needs.

An original article by Design Blurb

Icon Finder: Search for icons by keyword

Texture Lovers: Free texture resource

Texture Lovers is a website dedicated to showcasing free texture resources.

Texture downloads are neatly categorized as single textures (including exlusive textures), texture packs, texture inspiration and tutorials. Textures are further classified – for example, single texture category contains sub-categories like wood, paper, stone and foliage.

Textures on the site are also tagged, so if you liked a particular style, you could click on a tag and continue browsing. Related textures are also displayed at the end of each texture page. The site is well designed and neatly categorized, making lazy texture browsing a breeze. It is also one of the better examples of non-blog sites powered by WordPress. The design, features, categorizing and preview images are worth noting.

Currently, the number of textures cataloged on the site is not huge, but that is understandable since the site was launched only a couple of months ago.

Overall, Texture Lovers is a website worth adding to your collection of texture resources – particularly considering how easy it makes the whole process of finding, previewing and downloading textures.

An original article by Design Blurb

TextureLovers: A source of free texture downloads

Related reading:

• Nice Cork Texture – Free Download at stock.xchng
• Typography Served: Great Source for Inspiration
• Lost and Taken: Free, copyright-free stock textures

Also tell me through comments whether you like these 3D type art inspiration series of posts – I received some positive feedback in the last two posts, but I would like to know if at least most of you like it.

Make Love

Pablo

Try Type

Coming Through

Collide

Blue

An original article by Design Blurb

Inspirational 3D type art #3

Related reading:

• Inspirational 3D type art
• Inspirational 3D type art #2
• Type Porn

Here is our previous design:

And here is a little preview of the redesign, if you are an RSS/email subscriber, you can click on it to see the real thing.

Now, for some technical details: this design went through three pairs of hands. The design was created by Eli, sliced to xHTML by Niki Liu and converted to a WordPress theme by me.

If you like Design Blurb and the freebies we offer, here is how you can help Design Blurb – please spare a minute to vote for us on Stumble Upon, Delicious and Design Blurb. On posts oriented towards social media, links to those sites are included, so that you can vote easily.

The redesign also sees the introduction of an advertisement area. The revenue from ads will be used to hire graphic design tutorial writers (yes, that means more tutorials+downloadable PSD files!).

As with any other redesign launch, there may be a few loose ends to be tied up. I have been browsing around to find and fix any flaws (and did fix a couple of), but if you find any more, please spare a moment to contact me.

Don’t forget to tell us your suggestions/critique regarding the redesign via comments.

Update: Comment form was broken at launch of the theme, and is now fixed. If you tried to comment and got the error, go ahead and comment now.

An original article by Design Blurb

Design Blurb gets a redesign

Related reading:

• Design Blurb: New Design Resources Blog

Be Happy

Wood

Reality

Helvetica

Envy

An original article by Design Blurb

Inspirational 3D type art #2

Related reading:

• Inspirational 3D type art
• Type Porn
• Unique Type

Design for pleasure

3D text

Lost

Arctic Paper

Green

An original article by Design Blurb

Inspirational 3D type art

Related reading:

• Inspirational 3D type art #2
• Type Porn
• Unique Type

Open Font Library describes itself as “hosting the cream of non-proprietary typeface designs”. You can download, upload and remix available typefaces. Fonts hosted by Open Font Library can also be used by @font-face directive.

Visit Open Font Library

Also see Font Squirrel and Fontex, similar free font websites (although not open typefaces).

An original article by Design Blurb

Free and open font directory: OpenFontLibrary

Related reading:

• Fontex: free fonts directory
• Free iPhone Wallpapers
• 30 Free Cardboard Textures

Fontex has a beautiful design, and neatly categorized fonts, with details and thumbnails of each font. You can also view fonts ordered by best rated, most popular or latest fonts.

Visit Fontex

Also see Font Squirrel (our review), another website which showcases fonts licensed for even commercial usage.

An original article by Design Blurb

Fontex: free fonts directory

Related reading:

• Free and open font directory: OpenFontLibrary
• Sweet Typewriter Fonts for Designers
• Free iPhone Wallpapers

Either way, if you need to create stripes, Stripe Generator is a useful little web app. You can choose stripe size, spacing, style, background and foreground colors, shadow, orientation and tiling. After each modification, you would want to click the preview image to update it (which is AJAX, I think, ie. it does not require page reload).

Once you are done tweaking the options, simply hit Download and you get the stripes. You can also view the latest stripes, clicking on which would load the stripe in the editor. A neat implementation, I must say.

Visit Stripe Generator

An original article by Design Blurb

Create stripes online with free Stripe Generator

Related reading:

• Pixlr: Online Image Editor
• Create and share patterns at BgPatterns
• PatternHead: Free Vector Patterns

Shaun Inman

Shaun Inman invented sIFR (read more about sIFR), so you would expect the best of typography from him, would you not? The bold post title font looks really beautiful in oodles of whitespace.

Jon Tangerine

Jon Tangerine probably has a hatred of images – even his logo is made of pure text!

Ordered List

Ordered List uses image replacements to bring in bold type with subtle shadow (which adds depth).

A List Apart

A List Apart blends in serifs and sans-serifs beautifully, and uses font size to indicate hierarchy.

Jason Santa Maria

Jason’s site has good typography, also check out the variety of designs depending on the article you’re reading.

An Event Apart

Chunky type overlay for images and a liberal sprinkling of serifs for body copy completes An Event Apart, held by some of the members of A List Apart (above).

The Netsetter

Netsetter uses sIFR for post and sidebar titles, and unusually large serif for body copy.

The Deck

Deck is a premium ad network boasting of large corporate clients, and its owner, Jim Coudal, has designed the site with large type that shout its message. Even the logo could be built with type (although it isn’t).

Monday By Noon

Monday By Noon uses sans-serif of varying weight and size, aided by a minimalist design and lots of whitespace.

Omni Ti

Omni Ti uses serifs and sans-serifs in a delightful combination. Also notice the beautiful tagline to the right of the logo – the ampersand in particular.

Gr0w

Gr0w manages to look web 2.0 thanks to the design, but by using classy typography and color variations, it does not look too cheesy.

Geekaholic

Good combination of serifs for body copy and sans-serifs for headers.

Sushi and Robots

(Italic) Georgia looks beautiful when used properly – Sushi and Robots is proof of this.

I realize there maybe some notable omissions – i Love Typography, for example (which is because the new design is less typography-oriented than previous version).

Recommend your favorite designs with excellent type in comments below – if there are several suggestions, I will compile them in a future post here on Design Blurb. I have also added a Twitter profile field to comments here – and comments by users who entered their Twitter URL will have a Twitter bird in their comments, linking to profile.

An original article by Design Blurb

13 websites with inspirational typography

Related reading:

• Typography Served: Great Source for Inspiration
• 14 Awesome Design Resource Websites
• Inspiration: Gallery of iPhone-Optimized Websites

Click on the images below to download them (in full size), or visit the Texture Well site linked at the end for the full package (those guys have lots of useful textures).

Grapevine leaf texture

Ficus texture

Leaf Textures pack [Texture Well]

An original article by Design Blurb

Free veiny leaf textures

Related reading:

• 20 Free Fabric Textures
• 30 Free Cardboard Textures
• Texturise: Free Seamless Textures