Made these little things whilst experimenting with a web app design. Enjoy!
All posts in Free Stuff
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 super simple blue buttons for that I made whilst designing a personal project.
Download the Blue UI Buttons PSD (984)
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.
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)
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!
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.
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. Read more…
Want to get new posts via email? Sign up here and new posts will be sent directly to your inbox.