View high resolution

Today i am working on a complete redesign of a companies website where there is also a checkout process. While doing some research i found this article on Smashing Magazine about a study that had been performed by Baymard Institute among many webshops. Each of these test where monitors in different was and analysed with tester speaking there thoughts aloud.

The example above was given as a improvement in the design to give the user a more secure feeling of the form. As some visitors experienced parts of the shopping forms as not save. It is clear from the images that version B on the right is a improvement. Giving the credit card a different background and moving the logo of security next to the credit card form contains it as being more secure.

More great tips can be found here: http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/

Baymard Institute also have a research study specific for the checkout process on there website.

ZURBspeak - Interaction and product design talks from ZURB →

ZURBspeak is our way to give back to the community by sharing many of our lessons learned building product and helping entrepreneurs, designers, managers, movers and shakers build great products.

Very interesting video every designer for web or apps should look. Great examples of the relationship between the main elements of design and communication.

Visual, how it looks.

Content, what it says.

Form elements, what type of shape or icon.

Are you still here, get your but to that link and watch the video.

Article about why design for the looks can destroy the use of the purpose of the design: Tail wagging - Matt Gemmell →

The ongoing debate about skeuomorphism in software interfaces misses the point.

I really like this article, but the problem i have with articles about going more simple to be clear is that they mis out on a point that is very important. The emotional connect or feeling you get when you are using a app, device or tool. Going all about the functionality and focus can lead to dull looking and boring interfaces to work with.

We need to understand that when we all moved to this new trend of designing, we get bored with it. Just like we did with grungy, highly realistic and other trends of designs.

We should understand that this should not be about looks but about the tool. If flatt fits your identity and not your will to fit in then go for it, but else go for something that fits your product.

Redesigning the save icon and its interaction

A group on Branch is working on redesigning the save icon, i really like the idea from below by Aaron Delani. This is not a easy task, most of the icons are bit confusing as this makes sense when you look at the animation. Also like how it shows the progress from the saved version.

More information about the work done and the discussion go to http://branch.com/b/redesigning-the-save-symbol-let-s-do-this.

 

Spotted this message on http://www.thefoxisblack.com/2013/04/04/redesigning-the-save-icon/ .

View high resolution

webappfrontend:

Compressing png images even smaller! Finally i found a tool that managed to make our lovely png files smaller, coming more closer to the size of jpgs. Most of the time we are forced to use jpg because of slow bandwidth on mobile devices, but this tool seems to compress my optimized pngs even futher. Give it a try, http://tinypng.org/.

View high resolution

Finding the right color, just became more easier and fun with 0to255.com.

As a designer you run into your color chooses, at least i am. Today i came across this nice tool to help you find a lighter or darker version of a color to use in your next project.

Adjust the roundcorners of your photoshop shapes now with this great photoshop script. Wish i found this years ago.

Download: http://photoshopscripts.wordpress.com/2012/11/29/rounded-rectangle-radius-resizer/

The Human.txt file, show other who made the website

We have this robot.txt file that helps the search engines, but i like the idea behind human.txt to show who made the website without being on the actual placing your name at the bottom of the site.

Example of human.txt file

/* TEAM */

Your title: Your name.

Site: email, link to a contact form, etc.

Twitter: your Twitter username.

Location: City, Country.

/* THANKS */

Name: name or url

/* SITE */

Last update: YYYY/MM/DD                             

Standards: HTML5, CSS3,..                            

Components: Modernizr, jQuery, etc.

Software: Software used for the development

For more information checkout

http://humanstxt.org/

View high resolution

Have fun with your app, like Dropbox does when you need to wait a long time it suggest you to “Grab a Snickers”.

Photoshop how to get rid of that stupid “copy” on duplication layers

Finally, this tutorial pointed me out that you can disable this feature in photoshop. I have to say been lazy for years. Because i could have just search for it haha. But for those of you who are also annoyed but still didn’t change it in the Photoshop layer settings.

Here is how to disabled the “copy” on the duplication of a layer.

Go to layers tab, then click settings in top right corner and click Panel options..