Hi, Chris. I’ve already written an intro about you, so let’s get down to the questions. Tell us how you started your design activities – did you work on print and graphic design, then move to the web, like so many designers today?

I started out more or less a 50/50 mix of print and web. I had an interest in both areas so didn’t really mind which projects I worked on. After a while I became more interested in the coding side of web design and started focusing more on xhtml, css and web standards.

Nowadays my main work is a split of logo design and web design, with the occasional print job, so it’s pretty much still a mix!

Design Blurb is a blog catering mostly to graphic and web designers, so I’m sure many of them are curious about how you made the transition from one medium to the other (if any).

I actually learnt my whole XHTML and CSS skillset from following tutorials and article online. There’s a really handy collection of blogs and websites out there that kindly offer advice and useful techniques. Having learnt so much from the community myself, I enjoy giving back in my own way through tutorials etc.

We’re all looking for quality resources for learning and improving on various aspects of design. Can you tell us resources that got you started – a book that sparked your interest in design, an article, or something similar?

I’ve been a long time subscriber to Computer Arts Projects Magazine. The format of a different topic each month has helped spark interest in new areas, and to give inspiration for new projects.

My collection of RSS is also a super handy resource, whenever I’m feeling low on ideas, a quick browse through some fresh content from the blogosphere soon gets the creative juices flowing!

I think it would be fair to say Spoongraphics Blog and Line 25 put you on the (online) map. You have written about the positive impact they have had on your freelance design career, in many interviews (on Vandelay Design, for example). On the flip side, have these blogs had any adverse effects on you?

I can’t say there are any adverse affects. I’d like to say I’m constantly being stopped in the street, chased by raving fans and followed by the paps – But it’s not quite the case haha!

With all the benefits I’ve seen from blogging and having fun online, it’s really difficult to find anything negative.

What are the differences in skill set one needs to jump from a regular job, to a freelance career

Managing time between projects is a skill that naturally comes to you, once you take charge of what work you have to complete you slot it into your day with to-do lists etc. Avoiding the temptation to skive off and play computer games can also be difficult, but the benefits of freelancing is that there’s no-one watching over your shoulder. If you fancy spending an hour browsing the web, or head off for a beer there’s no verbal warnings – You just have to manage your time and ensure you catch up under your own motivation, for instance spending a few hours working in the evening.

What gadgets do you own?
I’ve been steadily growing my collection of Apple-ware, which now consists of MacBook Pro, 24” Cinema Display, iPod Nano and iPhone.

Otherwise, I have an interest in a little photography, and have just added a HD camcorder to my tech wishlist.

Allow me to ask you the never-resolved question: does Mac OS X help you, as a designer? I know that many have talked about the superiority of OS X – the platform – for designers, but with most necessary design tools (Creative Suite etc.) available cross-platform, does the platform affect you as a designer?

Switching to Mac has been one of those ‘Why didn’t I just spend the money and do it before’ moments. While I was a Windows user, I couldn’t see the benefit of Macs when the same spec computer could be created for half the cost. After taking the plunge though I’d say it’s definitely worth it, it’s the collection of little touches that makes the experience of everyday use so much more straight forward and enjoyable.

Seeing as you use WordPress for both blogs, can you tell us about the technical aspects – favorite plugins and hacks used, hosting etc.?

I have my own little cocktail of plugins that I tend to use on all my WordPress installs. These include the All in One SEO pack, Google XML sitemaps and Database Backup. I can’t say I tend to use too many hacks as the built in features are often pretty much spot on for my needs, especially considering there’s a wealth of tags and snippets in the Codex that will no doubt cover when I need it to do!

As a web designer, you have to deal with code every day, don’t you? What resources helped you develop front-end coding skills?

Keeping up to date with new coding languages and constantly refreshing your skillset is always important. There’s always something new you can learn when it comes to coding, whether it’s becoming more aware of standards, or coding something differently for better accessibility.

This comes right back to the resource of the blogosphere and the hundreds of handy websites out there that offer these helpful tips.

Any sites and resources you would like to plug? :)

My usual plugs have to go out to my sites at Blog.SpoonGraphics and Line25! I also recently started more personal content over at ChrisSpooner.com for anyone who might want to check out what I’m up to in my life.

A original article by Design Blurb

Interview with Chris Spooner of SpoonGraphics and Line25

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.

Don’t forget to add this post to your bookmarks, as I’m pretty sure that next time you’ll make a website, you’ll probably want to refer to it for some inspiration.

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.

Now that you have new ideas for your next website, I recommend you look for low cost web hosting to look for the best web host for your site.

A 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.

A original article by Design Blurb

Preview sites in various resolutions with View Like Us

Textures are neatly organized with categories, available on every page on the left side.

The collection of textures available is fairly good, with around 100 textures as of writing. They are offered at 1600 x 1200 resolution. Texture King recently changed from zip file downloads to image downloads, so that should help you some more.

A original article by Design Blurb

Texture King: Free texture downloads

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.

A original article by Design Blurb

Best free PHP learning resources for beginners

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’.

A original article by Design Blurb

Lost and Taken: Free, copyright-free stock 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.

A 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.

A original article by Design Blurb

TextureLovers: A source of free texture downloads

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

A original article by Design Blurb

Inspirational 3D type art #3

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.

A original article by Design Blurb

Design Blurb gets a redesign

Be Happy

Wood

Reality

Helvetica

Envy

A original article by Design Blurb

Inspirational 3D type art #2

Design for pleasure

3D text

Lost

Arctic Paper

Green

A original article by Design Blurb

Inspirational 3D type art

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).

A original article by Design Blurb

Free and open font directory: OpenFontLibrary

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.

A original article by Design Blurb

Fontex: free fonts directory

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

A original article by Design Blurb

Create stripes online with free Stripe Generator