Pixojo » Web Design

Free Full Layered Facebook GUI PSD Kit

Vitaly Friedman — Thu, 23 Sep 2010 14:10:47 +0000

In this post we release a free Facebook GUI PSD Kit, designed by SurgeWorks and released for Smashing Magazine and its readers. The main idea behind the kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. As usual, the kit is free to use in all projects, without any restrictions.

The kit brings the Facebook vector icon and logo. Also, since the focus of this resource are the UI elements, it brings a main window with the header, menu and the chat window for you to set up your realistic mock-ups. Plus all the modal components, comment boxes, buttons, message boxes, tabs, etc. All the components are full layered, built using vectors and blending options, so that scaling and editing the objects will not be a problem.

Download the set for free!

The theme is released under Creative Commons. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the kit as you wish.

Features

The PSD set consists of 3 PSD files:

Facebook-GUI.psd contains all Facebook UI elements;
Facebook-App-Authorization-Request.psd and Facebook-App-Template.psd contain the basic structure for Facebook applications design.

Facebook App Authorization Request (large view)

Facebook App Template (large view)

Features (large view)

Thank you, guys. We appreciate your work and your good intentions!

Posted on Pixojo | Free Full Layered Facebook GUI PSD Kit | http://www.pixojo.com

Feed enhanced by Better Feed from Ozh

Test your browser’s HTML5 prowess with the HTML5 test

Erez Zukerman — Sat, 18 Sep 2010 19:00:00 +0000

The HTML5 test gives you one huge, bold number denoting your browser’s HTML5 support level.

Simplicity is the key here: you just get a number. The number you see above is for Chrome Canary. Firefox 3.6.8 (my browsing workhorse) only scored 139 (and 4 bonus points).

It’s important to understand that this is not a benchmark. It doesn’t use any of the HTML5 features to render anything; the browser is simply asked, “do you support this?” and the site takes its word for it.

The “bonus points” come from audio/video codec support, as well as SVG and MathML for plain HTML. If that sounds like a bunch of acronyms I just stuck together, feel free to ignore it. What you should know is that the bonus is a bonus; not strictly HTML5, but stuff that usually goes along for the ride.

Another interesting aspect is that not every feature is worth one point. For example, the “Web applications” category has three tests, and is worth a total of 14 points. The “Gnolocation” group (under “Related specifications”) has just one test, worth 10 points.

So the number you get isn’t a count of features, but more of a weighted evaluation. Still, what’s great about the site is its simplicity – it’s a very easy way to convert people over to a more modern browser. Just have them point their trusty IE6 at HTML5Test, and then show them what you get on your awesome, modern browser. It’s easy to understand, which is the whole point.

Posted on Pixojo | Test your browser’s HTML5 prowess with the HTML5 test | http://www.pixojo.com

Feed enhanced by Better Feed from Ozh

Visual CSS HTML Sitemap Tool

Chester — Mon, 18 Jan 2010 16:28:32 +0000

Lets face it, no one likes creating HTML sitemaps. They are manual, boring and can take forever. Unfortunately SlickMap doesn’t automate the process, rather they use CSS to turn un-orded lists into a visually appealing HTML sitemap. So it does 1/2 the work for you.

Check it out for yourself! SlickMap CSS

Posted on Pixojo | Visual CSS HTML Sitemap Tool | http://www.pixojo.com

Feed enhanced by Better Feed from Ozh

CSS Status Message Boxes

Chester — Mon, 18 Jan 2010 03:25:41 +0000

CSS Message Boxes

CSS is fantastic and once you have it mastered, you wonder what you’d ever do without it. But then again, do you ever master it? There is so much more you can learn.

Here is a great tutorial on how you can use CSS to create message boxes for different events; success, fail, warning, information.

CSS Message Boxes for different message types

Posted on Pixojo | CSS Status Message Boxes | http://www.pixojo.com

Feed enhanced by Better Feed from Ozh

Mobile Phone Best Practices

Chester — Mon, 11 Jan 2010 03:22:28 +0000

Smart phones are becoming smarter and more popular than ever. The iPhone has paved the way and Android, Palm and others are following suite. So there’s no time better than the present to re-work your website to have an optimized version that will impress any mobile user.

Check out woorkup.com’s best practices for mobile devices for some great tips.

Posted on Pixojo | Mobile Phone Best Practices | http://www.pixojo.com

Feed enhanced by Better Feed from Ozh