Mobile Inc » Free Stuff

I Made Some Free Funky UI Buttons In PNG & PSD

Murat — Sun, 28 Aug 2011 13:37:24 +0000

Made these little things whilst experimenting with a web app design. Enjoy!

Download the Funky UI Buttons PSD & PNG (2132)

Thoughts On Designing A M-Commerce Site (PSDs Included)

Murat — Mon, 04 Jul 2011 12:08:14 +0000

Download the M-Commerce Site PSDs (2071)

Out of all the different types of things you can design in mobile I’ve always found shopping sites to be one of the most interesting.

Getting a user from the homepage of a site right through to checkout to spend their money is just damn right cool. Everything from the psychology of implying security by using a ‘padlock’ icon to rearranging a few form fields on the payment screen to increase conversion.

I’ve worked on a couple of M-Commerce sites now and I wanted to create something without the shackles of brand guildlines or a CMS. I had a bit of fun designing it and hopefully the source files (Photoshop PSDs) will come in useful for other designers out there.

I also tried to show a bit of the thought process for some of the bits you see in the designs below.

Here’s a few personal thoughts about M-Commerce (mobile web) design:

Don’t treat high-end phones the same as mid-range and low-end by serving exactly the same site without any attempt to utilise what actually makes them high-end. HTML5, CSS3 and Javascript capabilities can significant improve the user experience resulting in higher conversions.

Users don’t like clutter. If there’s lots of important information either decide a hierarchy or find clever ways to handle this in the UI like ‘tap to reveal boxes’.

Don’t recreate the same barriers you have online. If (for example) a part of your checkout process is causing drop-off then it will only been magnified on mobile. Rearrange and smarten up.

Of course all this is easier said then done with the ancient backend e-commerce platforms that many high street retailers have. Where open APIs are a luxury (and a huge investment) it’s no wonder the m-commerce war is being won by screenscraping (something that I’ll be covering in the future along the consequences for UX).

View the full size image here:

Some bits and bobs around the UI:

No related posts.

I Made Some Free Simple Blue Buttons In PSD & PNG

Murat — Sun, 03 Jul 2011 19:45:42 +0000

Some super simple blue buttons for that I made whilst designing a personal project.

Download the Blue UI Buttons PSD (984)

No related posts.

I Made A Free Nyan Cat In PSD & PNG

Murat — Mon, 20 Jun 2011 19:29:21 +0000

I haven’t made any free graphics for a while so I thought I would try and get back into the habit of creating stuff. And what better way to do this than to make a Photoshop file of the viral sensation – Nyan (Poptart) Cat!

Me and @frasiocht are working on a cool mobile demo featuring the rainbow spewing cat. More soon!

If you don’t know what the Nyan Cat is check the video below, 18 million views and counting.

Download the Nyan Cat PSD & PNG (1583)

The copyright of Nyan Cat belongs to Prguitarman.

I Made A Free Twitter Sign-In Button In PSD & PNG

Murat — Sat, 16 Apr 2011 01:51:39 +0000

In my quest to become a better designer I’ve started to really get into UI design, not that I wasn’t into it before but sites like Forrst and Dribbble have really made me take a look at myself and where I need to improve.

Just like most designers I’ve picked up some bad Photoshop habits over the years and now I’m on a mission to unlearn them. I’m also trying to take more care in the little details,everything from gradients, textures to element spacing.

Download the Free Twitter Sign-In Button In PSD & PNG (1086)

Soon I’m going to move onto doing more unique interactions because I think this will become a massive part of mobile design and I want to skill up.

After the previous buttons I made I realised how much I like creating stuff to give away, it’s actually quite relaxing creating stuff for fun with no pressure.

So here’s another button, nothing crazy just a Twitter sign-in one for blogs/sites who get people to log-in using their Twitter account. Oh and a little GIF below to show you what it would look like in case you were wondering.

These are released under the Creative Commons Zero license meaning you can do as you damn well please with the buttons and not have to mention credit me at all.

I Made Some Free Instagram Sign In Buttons In PNG & PSD

Murat — Fri, 04 Mar 2011 01:12:34 +0000

After launching Instabam (our mobile web + location experiment using the Instagram API) we received some great feedback, the general consensus was that everyone liked it but it was missing a few features, so we’ve decided to dedicate a bit more time and effort into adding some cool stuff.

Currently no login is required to access the photos on the site which is great, but we are now looking at different levels of personalisation for people with a Instagram account.

This will obviously require the user to login to get those juicy features. I did a quick search for a ‘Facebook Connect’ style Instagram button but because it’s such early days one doesn’t exist so I thought I would create my own and give the PNG and source file away for free.

You can use these buttons for personal and commercial use, all I ask is that you check out Instabam.com on your mobile phone and let me know what you think. Link backs and retweets not required but always appreciated!

Download the Download Free Instagram Sign In Buttons In PNG and PSD (1222)

No related posts.

I Made Some Free Facebook Connect Buttons In PNG & PSD

Murat — Mon, 03 Jan 2011 14:30:08 +0000

If there is one site that has influenced me the most this year, it’s the invite-only designer showcase Dribbble. The attention to detail in the work on there is amazing. It’s made me step back and realise that I have to improve, everything from font usage to organising layers properly.

So I thought what better place to start than creating a Facebook Connect button set that I’ve always needed but couldn’t find online. Inspired by the brilliant 365psd.com I decided to give away the buttons and source files for free

I’ve made them with mobile sizes in mind so they should fit from 320 wide screens all the way down to 120. The PSD source file is also included with every layer labelled, something which I shamefully never do.

This work is released under Creative Commons Zero which means you can copy, modify, distrubute and do whatever you like. You don’t have to link back to here but that would be very lovely of you.

Download the Click here to download the Facebook Connect buttons (5765)

No related posts.

Free Twitter Icons For All!

Murat — Fri, 24 Jul 2009 13:08:44 +0000

I worked in conjunction with the extremely talented Designer/Illustrator Leigh Pearce to create some Twitter icons that represent the 3 basic types of update you can do i.e From Web, From Mobile Web and From Txt.

Feel free to use them on your blog or web app.

Download the Set

The set comes in a zip file and contains 3 icons in PNG format. If you decide to share this set on your blog or website please link to this blog post rather than directly to the file.

Click here to download the ZIP (35.1kb): Twitter Icons (803)

If you are using the set for your design work a link back is not required, but always appreciated.

About the Designer

Big thanks goes to Leigh Pearce for creating these icons, hopefully this won’t be the last time we work together. Leigh is a top guy with a great work ethic and sense of humour. If you ever need a character designer be sure to get in touch with him.

Blog and Portfolio

Check out Leigh’s blog, it’s full of work, sketches and animation

Leigh on Flickr

Always interesting to see where the inspiration comes from, check out his Flickr photos

These icons are covered by Creative Commons which means you can’t sell them and stuff.

Click on the icon for more info.