That’s what e-commerce shoppers are asking as they creep closer and closer to making a purchase.

You can’t blame them.  They are about to put their credit card information into your website in the hopes that you will deliver the goods.

There are no hard rules about designing for e-Commerce, but there are plenty of fundamentals to follow to ensure you are garnering the trust necessary to be successful.

In this article we will delve deeper into these fundamentals and expose some areas that may be creating some skeptical shoppers on your website.

1. Guarantees

An online shopper is making a sacrifice.  They can’t physically see, touch or smell your product.  A well-placed guarantee can overcome the fear that your shopper has regarding the purchase.

Notice how REI places their guarantee front and center early on in the buying process.

2. Search

If you are selling a number of products, you better have a search function and it better work well.  If it doesn’t, the trust in your company decreases.

You can find the absinthes that most suits you by using the array of filters on the search bar at All Absinthes. Further customization allows you to search with a country of origin with a bar to the left.

3. Reviews

Customer reviews are critical in the success of an e-commerce website.  Studies show that product and company reviews are among the most important elements on an e-commerce page.

These reviews are a way to begin the conversion with the customer by demonstrating that others have purchased from you successfully.

The Kahala Resort features a page dedicated to customer reviews – an important feature to have when investing in a luxury vacation package.

Reviews are commonplace on electronics sites such as Newegg. Many customers will forgo purchasing larger expense items such as electronics if there aren’t reviews on the product.

4. Well-Written Product Detail Pages

Customers tend to spend a lot of time on the product detail page and you should work towards presenting all the information the customer needs to know about a product in an intelligent and easy to access format.  Typos, grammar errors and otherwise poorly written product descriptions can be the death of your sale.

The detail page for a product on Opermage.com is both clear and concise in presenting the information about the product before making a purchase.

.

The product detail page for a Kashi cereal allows you to view nutritional info, send to a friend, and print the page, in addition to purchasing it. The detail page gives visitors the information they need and allows them to interact with the information.

5. A Clear Checkout Process

The checkout process should have as few steps as possible to avoid confusing the shopper or making them feel trapped. That being said, be careful about asking for payment information too soon, as they’ll begin to suspect things are out of order. Also be clear about taxes and shipping costs.  Be as transparent as possible in the check-out process.

The checkout process for the online retailer Anthropologie details where you are in the checkout process as you go along. It also doesn’t make the customer feel stuck and includes options for saving it for later or moving the item to your wishlist.

Here are four quick ways to make the check-out process feel more trustworthy:
• Tell the customer where they are in the checkout process
• Retain customers previously entered information, in case they leave to get more information, etc
• Provide a complete summary of the purchase
• Provide images and detail throughout the process that indicates the accuracy of the order

6.  Transparency About Additional Costs

We all know that the price we see on the product detail page isn’t the price we are going to pay.  Why not be up-front about it?

The first page of the TigerDirect checkout form offers a tax estimator based on zip code and states what will be taxed.

Target provides shipping information below the product details to provide transparency to those shoppers wanting to know the total investment before getting too far into the check out process.

Should I trust you?

If you don’t have all of the above elements in your e-commerce website design, probably not.

This is certainly not an exhaustive list of trust elements on an e-commerce web design.  What would you add?  Please let us know in the comments.

Co:c0llective

Epic Paul Snowden

Gravity Framework

Craig Coles

Upperdog

Young Turks

Purty Pixels

Decorated Playlists

Ben Bate

Bit This!

Viljami Salminen

MmDesign

Temple

That Made

Helen & Hard

Yaron Schoen

Jason Drakeford

Grain & Gram

Helen Anna

Jamie Gregory

Enfant Terrible

Ideas on Purpose

Positively Melancholy

Offset Media

Distrop

For more design inspiration please see:

• 25 Beautiful Websites Using Subtle Textures
• 25 Well-Designed Church Websites
• Examples of Testimonials in Web Design
• 25 Creative Navigation Menus
• Design Trend: Ribbons, Badges, and Banners

Mobile networks have developed at a blistering rate. We have gone from 1st Generation networks (1G) to almost 4th Generation (4G) networks in a little over a decade. During this evolution, the data speeds have evolved from a mere 9.6 kbps (kilo bits per second) in 2G to over 100 Mbps (mega bits per second) in 4G. Techno mumbo jumbo aside, the implications of this increase are huge.

For example, if you were to access a photo that is 50 Kbyte (kilo byte) in size over a 9.6 kbps link, it would take approximately 42 seconds to download. But if you were to download this same photo over, say, a 100 Mbps LTE connection; it would take only 4 milliseconds. From 42 seconds to less than a second. Given that speed plays such a huge role on the user’s overall experience, the mobile platform has become a commercial goldmine overnight.

An app-driven market

All the while, mobile providers have been struggling to support networks that are now more data-centric than they are voice-centric. This might seem counter intuitive, but the logic is sound. Mobile providers never really knew what their data networks would be used for, but they figured that since mobile voice was such a big success, mobile data would also be. They were right, of course.

In the olden, 2G days, “apps” were far from popular—aside from a few games that came pre-loaded on mobile devices. Even then, only a true technophile knew how to (and then even dared to) load new apps on their phones. Today, things are different. Today, we have “smart” phones that can download applications with the touch of a button. But beneath the veneer of shiny icons and slick “app stores” provided by the major software companies, network providers are struggling to keep up.

Honestly, I’m not really sure what I would functionally do with—or why I would even need— a 100 Mbps (or more) connection for my mobile phone. Sure, it would be nice to send/receive an e-mail with a big attachment in next to no time. But is that something we need? or that we should expect? The reality is that even today we are used to a lot less than 100 Mbps. And that’s on our “desktop” computers.

The perils of “always on” devices

The biggest problem for the mobile operator today isn’t the threat of other mobile operators. Instead, mobile operators must concern themselves with 3rd Party Service Providers (including developers) that can offer all sorts of services and applications over their network. Although voice services still “pays the bills,” the costs due to data usage continue to escalate. Sheer economics dictates that mobile operators will not survive if they continue to offer “eat as much as you want” data plans.

This forms a catch-22 for the provider. On the one hand, users want more data and developers want more bandwidth to offer compelling products. On the other, operators need to know what their networks are being used for (and when) so that they can charge users appropriately.

Somewhere, there’s a compromise. The mobile operator gets rewarded for the advanced network it builds; the developers or 3rd party service providers generate profitable businesses based on innovative uses of their networks; and the consumers don’t pay and arm and a leg while they figure it out. Unfortunately, we have yet to see any sign of this compromise coming about.

To be sure: mobile networks will continue to evolve and become bigger, faster and more advanced. Application developers and 3rd party service providers will also continue to push the bill. But at what cost to the consumer?

In the meantime, the onus is on mobile app designers and developers. When will our applications actually test the limits of mobile technology? Instead of asking ourselves what’s the fastest or most light-weight solution, think big! How much more is there that we can control, how much more that we see, and how much more convenience that we can provide if we use mobile networks to their full extent? Only then will our perception of the mobile experience, and its relative cost, evolve.

That means an extra HTTP request just for the headers. Worse, the :hover effect is a totally separate image. That means yet another HTTP request and a “flash of black” while the second image loads on your first hover.

We can do it with zero images! Here’s our version:

The markup for the header is just a title with a link inside:

<div class="module">
  <h2>Community <a href="#">Blue</a></h2>
  <!-- stuff in module -->
</div>

Here’s the basic setup of the header, with the link on the right with basic coloring, including the straight white line made by a border:

.module h2 {
        background: #ccc;
        padding: 0 0 0 10px;
        font-size: 16px;

        /* Thickness of the bar more easily achieved with line-height
           since padding would push link inward.  */
        line-height: 2;
}
.module h2 a {
        float: right;
        position: relative;
        text-decoration: none;
        color: #333;
        padding: 0 10px;
        border-left: 5px solid white;
}

Now the trick to getting the arrow within the line is just using CSS triangles applied via the ever-useful pseudo elements.

.module h2 a:before,
.module h2 a:after {
        content: "";
        position: absolute;
        /* Pushed down half way, will get pulled back up half height of triangle
           ensures centering if font-size or line-height changes */
        top: 50%;
        width: 0;
        height: 0;
}
.module h2 a:before {
        left: -12px;
        /* Triangle */
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid white;
        /* Pull-up */
        margin-top: -8px;
}
.module h2 a:after {
        /* Smaller and different position triangle */
        left: -5px;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #a2d6eb;
        margin-top: -6px;
}

One significant difference between ours and theirs is that they have a gradient that goes right through the triangle. That’s not possible with ours as it’s not practical to apply gradient with the CSS triangle technique. That’s not to say gradients are out though, you’d just need to make sure that where the triangle attaches to the main link, the color is solid.

For the demo page I added a few different colors, transitions, and examples where double-triangles could be used to fake an angled line.

Here’s a list (that I’ll continue to update) containing a wide variety of skills and technologies that I think all front-end developers should be working on learning, at least to some extent. I certainly don’t know all of these, nor do I expect anyone else to.

The list is not necessarily in any particular order, but I tried to keep the more rudimentary stuff at or near the top. Also, many of the items overlap others, so there’s a lot of cross-over within the list. And of course the list has lots of potential for improvements (more on that below).

• XHTML / HTML5
• CSS2.1 / CSS3
• JavaScript / Ajax
• jQuery
• HTML5 Boilerplate
• Modernizr
• YUI Library
• OOCSS
• CSS Grids
• CSS Frameworks / Resets
• Progressive Enhancement / Graceful Degradation
• HTML and CSS Specifications (W3C / WHATWG)
• UX / Usability
• Website Speed / Performance
• Dojo / MooTools / Prototype
• Responsive Web Design
• Mobile Web Development
• Mobile Web Performance
• Cross-Browser / Cross-Platform Development
• Document Object Model (DOM)
• IE6-IE8 Bugs and Inconsistencies
• CSS Pre-Processors (LESS / Sass)
• Debugging Tools (Firebug, etc)
• Version Control (Git / GitHub / CVS / Subversion)
• HTML5 APIs
• OOP
• PHP
• Ruby on Rails
• MySql
• Accessibility
• WAI-ARIA
• Microdata / Microformats
• Internationalization
• HTML5/CSS3 Polyfills
• Functional Programming
• JSON
• Localization
• Content Strategy
• Offline Web Apps
• SVG
• Canvas API
• Image Editing Tools (Photoshop, Fireworks, etc.)
• Web Font Embedding

I may eventually turn this post into an extended list divided into categories plus links to articles and tutorials where these subjects can be learned or mastered — but for now you’ll just have to trust your Google searching abilities if you want to learn more on any of these.

Please Contribute

The list is a rough first draft, and I’d be happy to update it and refine it based on any feedback. So please offer your suggestions on how it could be improved and/or expanded and I’ll make any necessary updates.

Let’s face it. Those of us who consider ourselves to be adventurous frontend developers are pretty spoilt at the moment. Browsers are getting beefier and stocked full of all kinds of bells and whistles, and have new capabilities that most of us would never have imagined coming to the lowly browser a few years ago. Along with these new abilities, we have an audience who are more sophisticated and who expect and understand more complex or imaginative user interfaces. This all creates opportunities to really push the boundaries and create sites with user interfaces which can surprise and delight.

Sometimes this can mean something subtle, some crafty piece of genius which goes unnoticed but makes our experience better. Sometimes the result is as subtle as a mouthful of popping candy washed down with cherry cola.

So here then, are 20 sites which caught my eye this year, with either their ambition, their subtlety, or simply their JavaScript craftsmanship.

Advertisement

Clever shizzle and demos

Let’s start off with some fun stuff. These sites use JavaScript in conjunction with a variety of emerging browser technologies such as Canvas, WebGL, CSS3 and a whole host of HTML5-flavoured friends. Mostly these are just intended to delight the user, or to show off a new feature in a modern browser. While most are well behaved, some may result in some huffing and puffing from your processor or graphics card, so laptop users may want to keep an eye on the temperature of their thighs, lest they be turned to pork crackling.

1. Baroque.me

This simple but hypnotic site, Baroque.me, makes use of the HTML5 Canvas element, cleverly controlled by JavaScript to render a simple visualisation of a Bach Cello suite (which you can’t fail to recognise once it gets going). The audio is provided by Flash, which is controlled by the JavaScript. You can interact with the animated points which ‘pick out’ the notes, but I found that I was hard pressed to improve on Bach’s sense of timing.

Its creator, Alexander Chen, works at Google Creative Labs and was behind the lovely Les Paul Google Doodle, also brought us a fabulous time-lapse visualisation of the NY subways system earlier in the year.

2. Beercamp

The fun, zoomable interface of Beercamp 2011 made clever use of CSS3 and JavaScript to grab quite a bit of attention ahead of the South by Southwest conference in March. Mostly using CSS3 transitions and transforms, you’ll also find this site uses JavaScript to hijack the browser scroll event in order to control the zooming effect. You can find a detailed explanation of how David DeSandro created this effect as he kindly shared the technique with us earlier this year. I also rather like the slightly geeky reference to Inception at the limit of the zooming. Look out for it!

3. Three.js

There is quite a buzz about the powerful rendering opportunities that technologies such as Canvas and WebGL bring to the browser. Three.js, a project from Mr. Doob (of snazzy Flash and ActionScript fame), to create a 3D JavaScript engine which can render using these new browser features. A quick look at the examples of Three.js performing tasks like particle animations or 3D modelling really gets the imagination going.

4. Windows Phone Demo

Breaking news: the web is on mobile devices too these days! To be honest, this list may be a little light on examples of exciting JavaScript optimised for the mobile market. Here though, is the first of a few examples of great work for mobile.

As a means of demonstrating the interface on the new Windows Mobile devices, Microsoft created this nicely executed example of a user journey on Windows mobile. Many of us have seen the Tiles interface with its smooth animations and crisp user feedback. This is replicated beautifully on this site with CSS and JavaScript (best viewed on your iPhone or Android device – not supported on a Windows phone!).

Utilities

This collection of sites isn’t about looking cool or giving you a nice “ooh” moment (though some of them do), but rather, they do a job for us. Some of them are JavaScript resources that we’ll use again and again as developers, while some use JavaScript as their weapon of choice for delivering a service to us through the browser.

5. Workflowy

Workflowy is a tool to help you “organise your brain”. Launched into beta in November of 2010, this clever mega-list in the browser took just 30 days to reach the milestone of having one million lists. Created by Jesse Patel and Mike Turitzin, Workflowy uses JavaScript for some crafty and elegant DOM manipulation and storage, and enables some rapid searching across large amounts of local list content. Well worth trying out if you like organising youself with lists or finding new GTD tools. Recent support for mobile and tablet devices along with sharing parts of your document for collaboration make this an interesting and powerful tool.

6. jQuery Mobile

While it is true that the ratio of mobile to desktop web users is moving in the mobile direction, developing for mobile devices is still tougher than a cheap steak wrapped in bacon and shoe leather. The goal of the jQuery JavaScript library was to normalise common JavaScript tasks across browsers. jQuery Mobile has an even more ambitious goal: to simplify web development across a staggeringly diverse mobile landscape. With the library recently reaching version 1.0, the jQuery Mobile site is a living example of how jQuery Mobile can be used to create usable interfaces for a large range of mobile and traditional browser devices. An amazing achievement.

7. Spritecow

Spritecow, built by Jake Archibald, is a simple solution to a fiddly and time-consuming problem. I’m going to make a leap and assume that if you’ve read this far, then you’re either interested in frontend development, or a member of my family. Many in the former of those groups will be familiar with the task of creating spritesheets as a means of making interfaces more responsive and reducing the number of expensive HTTP requests. Spritecow uses a combination of JavaScript, Canvas and some clever maths and logic to provide an easy to use tool which helps you generate the CSS for your spritesheet.

(Disclaimer: I worked with Jake at the time he put this together … in his spare time … on the train. Freak!)

8. Cloud 9 IDE

It is a sign of our times that entire development environments are now possible in the cloud and in your browser. Cloud 9 have been steadily developing their integrated development environment (IDE) over the last few years, but this year it really became an exciting prospect and a viable development resource on the web. Founder and CTO, Rik Arends explained that using JavaScript to manipulate the DOM to control the document in the editing environment (along with a giant sackful of crafty techniques) allows much better performance than similar projects that went before such as Bespin. Configurable and extensible with JavaScript, there are huge possibilities for this as a development environment. Exciting to watch.

9. Reveal.JS

Reveal.JS is a tool for creating gorgeous-looking presentations with HTML and publishing them on the web. This is the kind of thing that I’ve started building myself more times than I can remember. With Reveal.JS though, Hakim El Hattab has done it right. Making beautiful use of CSS3 transforms and JavaScript to provide a tool which any web developer would enjoy using to make a professional-looking presentation.

10. Pusher

I’ve been tempted to make more mention of awesome JavaScript resources such as Node, Modernizr, or jQuery but have tried not to let the JavaScript utilities dominate this little hit-parade. Pusher though, is too good to resist. Although it has been around for longer than a year, recent improvments for Web Sockets support in browsers, and the meteroic rise of Node have made Pusher more relevent and attractive than ever.

Pusher is a hosted service which provides an API to power your real-time apps and services. A great site with lots of thoughtful documentation makes getting started simple.

Originally developed by some clever folks at New Bamboo, a small, but smart development shop in London, Pusher itself was built with Node when New Bamboo spotted a need for easy real-time communication to power all manner of web applications games and tools.

11. Speakerdeck

Simple and rather easy on the eye, Speakerdeck, from Ordered List – who have recently been acquired by Github – does a wonderful job of displaying your presentation decks with JavaScript and web technologies. While other popular services for this kind of thing make heavy use of Flash, Speakerdeck is comparatively light touch and uses JavaScript to enable previews of slides as you scrub over the presentation timeline. Lots of features and nice touches to be found here.

12. Gauges

Since we’re talking about Speakerdeck, we should also take a look at Gauges which is another yummy service from Ordered List. This analytics tool, similar to Google Analytics, uses the well-worn route of a small JavaScript drop-in to enable the capturing visitor statistics to your site. Gauges has a rich and well documented API and a beautiful rendering of real-time analytics data. Mmmm. JavaScripty. Very cool and rather beautiful.

Evolving interfaces

13. BBC homepage

There has been some debate about the recent refresh to the BBC homepage. Some love it, some hate it. Personally, I find it goes a little bit carousel-crazy and I’m struggling to find it very loveable at the moment. That said, there are some cool interactions here and it’s good to see that things have been built with an understanding of progressive enhancement. The hinting of the ability to floop in more content, and the way that the carousel controls scale are rather gratifying. The homepage also seems to handle a lack of JavaScript quite nicely and demonstrates a good deal of care. I still find it’s a bit busy and boxy though.

14. BBC iPlayer

I know that we already looked at the BBC, but the BBC iPlayer really does deserve a mention. Yes, the iPlayer site also show signs of a love of carousels in the BBC, but I’d argue that it has an ambitious, JavaScript-driven interface which does a nice job of getting rich content (and I’m thinking of the images, not just the video content) into our eyeballs rather efficiently. Use of the BBC’s homegrown and open sourced Glow JavaScript library does a lot of the snazzy work.

15. Facebook

Ok, I admit it. I’m one of those web snobs who is a bit down on Facebook. But I can’t ignore the sophistication and the scale of the work that has gone into bringing the Facebook interface to life. It is rammed full of ‘real-time’ messages, notifications, chat features and goodness knows what other kinds of rich user interfaces which, while not aesthetically to my taste, have a huge impact on the web and its citizens.

Under the radar and hidden beauty

I have to confess that even though I’m a sucker for a shiny new visual effect or a crafty piece of library code (that second one is what really gets the girls), what I enjoy the most is subtlety, craft and a thoughtful use of technology. These last few examples fall into that camp.

16. Github

Github is full to the brim with interesting user interactions and thoughtful attention to detail. From the navigable code tree, which smoothly swooshes you through the directories in a project while taking care of the page address so that your location is correctly bookmark-able, to the in-line code editor which enables code commits from the browser (powered by the Cloud 9 editor, as it happens). Look-ahead searching, stunning popup menus and interface elements, a code network visualiser built in Canvas, the list goes on and on. Bravo Github. Bravo.

17. Google Doodle

I’ve always enjoyed the playful animated Google Doodles which you can often interact with. Sometime we grin as we discover them, sometimes we don’t even notice them, but after just one day, they are gone. Recently I got to speak to Marcin Wichary who is one of the team at Google responsible for these one-day “delighters” which through necessity of scale, have to push the boundaries in JavaScript optimisation techniques. I particularly loved the sprite-crunch technique that the team evolved to minimise the size of their sprites used in their animations. Very clever stuff. These Doodles regularly tap in to an emerging browser API or use JavaScript in very imaginative way. Clever Google boffins!

18. Nike Better World

This campaign site for Nike has been much copied and discussed. A single page site which uses a combination of JavaScript and CSS to deliver an interesting parallax effect as you scroll your way down through the page. While this site also works pretty well without JavaScript as it gracefuly degrades to a version that simply has the parallax effect removed, I rather wish that the navigation links could have been retained by simply using links to good ol’ HTML hashes. JavaScript could simply have hijacked those links so that the navigation could have worked with or without JavaScript.

19. Mobile Beetle

In a talk I gave earlier this year, I made quite a few criticisms about the new site for the Volkswagen Beetle. I’ll not continue that here other than to say that the site certainly could be said to have pushed JavaScript to the limit. It’s another of those fancy layered scrolling effect sites, but with three shots of espresso. I must however, tip my hat to those who made the mobile version of the site. When viewed on an iPhone, the reduced version makes clever use of the touch and scroll events to deliver a nice experience (although the images are a little heavy if you’re not on WIFI).

20. Twitter mobile site

The fact that there are so many good Twitter clients for mobile devices means that many of us didn’t notice the rather excellent mobile-optimised web client that Twitter rolled out this year. The Twitter engineering team took many of the UI conventions of leading iPhone Twitter apps and recreated them in their own web framework. The result is a very impressive, app-like feeling in the browser on your smartphone. Android and iPhone do particularly well here. Lovely work.

…and that’s 20

So that’s it. Those were 20 sites which I think have pushed JavaScript in some way this year. Of course there are others which should have been on the list, but the web is a big place and 20 is a small number. There are plenty among them that I love, but there are things that I’d criticise too. JavaScript is empowering developers to do wonderful things in the browser, but some of our 20 do this at the expense of the things like accessibility, address-ability and other things that we need to safegaurd for the good of the web. Nevertheless, there is much to inspire us in the developments that have happened this year.

Preview

Here’s a look at the end result of what you’ll be putting together today:

Resources

You’ll need a couple of extra resources for this tutorial. You can grab them at these links:

• Baltar — DaFont
• Cloud Brush — Brusheezy
• Sunflower Official PSDs
• Butterfly Official PSDs
• Butterfly #2 Stock.xchng
• Leaves Stock.xchng

Step 1

Create a New Document in Photoshop. The size of my document is 3600px by 2700px at 72DPI.

Step 2

On your background layer, fill it with #C7C6B4. Then take you Brush Tool (401px soft round brush) and darken the outside edges of the canvas. The color I used is #878876.

Step 3

Now grab your type tool. The font I’m using is Baltar but I encourage you to try other fonts. With your type tool selected arrange the letters like the image below. I also used different font sizes. For this tutorial I am using the word ‘Creativity.’

Type Colors:

• C: #ED211C
• R: #ED7A1C
• E: #39B54A
• A: #07AC1D
• T: #004A80
• I: #EC008C
• V: #EC0043
• I: #ECBD00
• T: #06EC00
• Y: #A00BC0

Step 4

Note: It is a good idea to place each seperate letter in a folder so that you can keep it organized. Now let’s focus in on the letter “C” the color of this letter is #ED211C. Next, duplicate this letter by right-​​clicking then duplicate layer. On the original “C” layer apply this layer style.

Step 5

Now apply the Gradient Overlay. Note: You may have to move your cursor around on your canvas to get the gradient area just right.

Step 6

On the “C copy” layer move it below your original “C” layer and then move it over to the right and a bit upward like the image below.

Step 7

Make a new layer above your “C Copy” layer and grab your pen tool, what we will do now is connect the corners of the letter.

Step 8

Right-​​click the path you made and make a selection from it and fill it with #ED211C.

Step 9

Now rasterize the “C copy” layer and merge it with the layer above it (the areas that we used to connect the corners). Now we will change the Color Overlay in the Layer style panel (#BF1510).

Step 10

Now with the “C copy” layer still selected go to Layer > Layer Style > Create Layer. By doing this it should have created a sub layer above this layer. On the new layer grab your Burn tool and darken the areas where the shadow will be. The size of my brush is 66px soft round brush, Midtones, 50% Exposure.

Step 11

Now take your Dodge tool and brighten the areas you didn’t burn so that it looks like the image below.

Step 12

Add a Drop Shadow from the layer style panel.

Step 13

This is how your letter should look:

Step 14

Create a new layer above the original “C” letter layer and with your Brush tool 131px soft round brush (#FFFFFF) make it look like the image below.

Step 15

Change this layer to Overlay

Step 16

Grab your Brush tool again and increase the shadow by using #000000 on a new layer:

Step 17

Change the Opacity to 32%:

Step 18

Create a New layer and with a small 60px soft round brush #FFFFFF create light spots.

Step 19

Take your Smudge tool and move the light spots in one direction:

Step 20

I won’t go through the process with each individual letter, as the same process applies and can be easily repeated. Instead, I’ll provide the color information I used for each of them.

Letter R

Original “R” Gradient Overlay:

“R Copy” Color Overlay #c25b07:

Letter E

Original “E” Gradient Overlay: #B9B006> #F1E500 (Change the Blend Mode to Hard Light in the Layer Style Panel)

“E Copy” Color Overlay: #b9b006

Letter A

Original “A” Gradient Overlay: #9C4804> #F38A34 (Change the Blend Mode to Overlay)

“A Copy” Color Overlay: #047113

Step 23

Letter T:

Original “T” Gradient Overlay: #04253C> #FFFFFF

“T Copy” Color Overlay: #04253D

Step 24

Letter I:

Original “I” Gradient Overlay: #840550> #FFFFFF

“I Copy” Color Overlay: #840550

Step 25

Letter V:

Original “V” Gradient Overlay: #740726> #FFFFFF

“V Copy” Color Overlay: #740726

Step 26

Letter I:

Original “I” Gradient Overlay: #957907> #FFFFFF

“I Copy” Color Overlay: #957907

Step 27

Letter T:

Original “T” Gradient Overlay: #957907> #FFFFFF

“T Copy” Color Overlay: #057303

Step 28

Letter Y:

Original “Y” Gradient Overlay: #450653> #FFFFFF

“Y Copy” Color Overlay: #450653

Step 29

Here is how your image should look:

Step 30

Now underneath all of the letters, create a new layer and with your brush tool — grab the cloud brush and place clouds on this layer in #FFFFFF.

Step 31

With the Brush Tool still selected use a fairly large size soft round brush #88AFD7 and add some blue to the background.

Step 32

Create a new layer and use the a soft round brush #074387 and do the same as in the previous step. Change this layer to Linear Burn, Opacity: 51%.

Step 33

Create a New layer and with a soft round brush #000000 and add shadows to the bottom of the canvas, turn this layer to Opacity 22%

Step 34

Create a New layer above the clouds layer and grab your Rounded Rectangle Tool. I’m using a 300px radius with the color #EA6C00

Step 35

Change the Fill of this layer to 0%. And apply this layer style

Step 36

Arrange it behind the letters and create some more of these rounded rectangles with various sizes and colors.

Step 37

On the smaller ones I added a Drop Shadow and Outer Glow to give it an added effect.

Step 38

Create a New layer above all layers and with the pen tool make a light streak path. Note: Make sure that your Brush tool is set to the Flat Point Medium Stiff Point 28px. Go back to your pen tool and right-​​click > select stroke path

Step 39

Erase the unnecessary parts. Add Outer Glow

Step 40

Now use your stock photos and arrange them around the letters like so. For some of the images I gave them a slight Drop Shadow to blend them in better.

Step 41

I also used a soft round dark color brush to show the shadow from the letters on the flower, butterflies and so on. And your done!

Related posts:

1. Photoshop Techniques, Tips and Tricks
2. Creating A Letterpress Effect For Logo Design In Illustrator
3. 3 Text Spacing Principles Every Designer Needs to Know
4. How to Create a Showcase with jQuery

I recently explained why wireframes can hurt your project. My point was that in a lot of cases, you can save time by designing in Photoshop straight away or using a HTML prototype to flesh out your app. But some people rightly pointed out that wireframes were a better tool for sharing information in a way that’s approachable to people without design or coding skills.

Although that’s a good point, in my opinion there’s a better, faster, and easier way to accomplish that goal: prioritized lists.

Wireframes: an evil force of destruction and despair?

Goals and elements

It’s an extremely simple technique, and you don’t need any special kind of software to do it. You can do it inside a plain old email, and here’s how it works. For each page, make a list of all of that page’s goals and elements.

A goal is the reason that page exists in the first place. For a homepage, it could be something like “make people sign up”. For a support page, it could be “make it easy for people to contact us”, or maybe “route people through the right support channels so they don’t need to contact us”. You goal list should generally have between 1 and 3 items. Any more than that and it means your page lacks purpose and will not be effective.

And an element is simply anything that appears on the page: buttons, navigations, taglines, forms, etc. Your element list should include between 5 and 10 items, depending on how thorough you want to be. For example, it’s usually not very useful to list every single navigation element as separate items, and you can also omit basic elements that already have a fixed location like the logo or footer.

A call-to-action button on Zendesk.com

Once you have your two lists, sort everything in three buckets: Most Important, Important, and Secondary. Your “Most Important” bucket should not have more than 1 to 3 items, otherwise it’s a symptom of an unfocused page. Your “Important” bucket will usually have about 4-5 items, and the “Secondary” bucket simply contains all the other stuff.

Focusing on content

The advantages of this technique over traditional wireframes are two-fold: first, it’s quicker and simpler to do. But the other big advantage is that it encourages people to think in terms of goals and content rather than layout. Removing the layout from the equation completely means that all design decisions will belong to the designer when it comes time to create a Photoshop mock-up or a HTML prototype, and those decisions will be much more meaningful at that stage.

An example: Zendesk.com

Since the easiest way to learn is by studying a concrete example, let’s pick a site (for example, the great Zendesk.com by the fine folks at the Cuban Council) and apply this technique retroactively.

The Zendesk.com homepage

Goals

• Get people to try the service

Elements

Most Important

1. “Try it free” button
2. Tagline

Important

1. Main navigation (home, pricing, customers, your)
2. “What is Zendesk” paragraph
3. Companies using Zendesk

Secondary

1. Secondary navigation (contact us, resources, login)
2. “Close your customer loop”
3. “Register for live webinar”
4. “Your guide to selecting help desk software”

That’s it! Of course, coming up with that list in the first place takes some time and effort, but it’s still a fairly quick process compared to whipping up a wireframe.

You’ll notice I left out some elements. For example I didn’t mention the homepage screenshots illustration at all. That’s because this kind of graphics is there to support your message, but it’s usually not the message itself. At this stage of the process, you probably won’t know what will work best yet, and that kind of decision is best left to your designer.

I hope you’ll get a chance to try this technique for your next project, and be sure to let me know how it worked for you.

I recently had a conversation with a client that went like this:

Client: Does it really matter what my website looks like?
Me: Yes, it definitely does.
Client: Why?
Me: Because people will judge your company based on the quality of your website, whether that’s fair or not.

That ended up being a good enough answer, prompting him to give the go ahead to redesign his site.

But the question made me stop and consider:

How do you prove good web design makes a difference online?

Sure, every web designer will tell you that design has a profound impact, which is an intuitive answer, but what evidence is there that supports the claim?

Here’s what I found out.

A Study About Health Websites

Later in the week after my conversation with the client, I came across a study referenced by Derek Halpern of Social Triggers. It was titled Trust and Mistrust of Online Health Sites. I thought it might provide insight about web design, so I checked it out.

The goal of the study was to answer this question:

How much impact does design have on trust and mistrust of health websites and how much impact does the quality of the content have?

The results were nothing short of astounding.

For the test, 15 participants were directed to search the internet for health information that was relevant to them, and then they were asked to discuss their first impressions of the websites they visited.

Of all the factors that were mentioned for rejecting or mistrusting a website, 94% were design related; only 6% were content related.

Can you believe that?

When deciding whether or not they trusted a health website, participants mentioned design related issues 15 times more than content related issues. That’s incredible.

Specific design problems that led to rejection or mistrust were:

• Inappropriate name for the website
• Complex, busy layout
• Lack of navigation aids
• Boring web design, especially use of color
• Pop up advertisements
• Slow introductions to a site (splash pages, slow-loading flash introductions, etc)
• Small print
• Too much text
• Corporate look and feel
• Poor search facilities/indexes

These kinds of complaints accounted for 94% of the reasons that users rejected or mistrusted a site. Here’s a quote from the study that sums this up:

“The look and feel of the website was clearly important to the participants. Visual appeal, plus design issues relevant to site navigation appeared to exert a strong influence on people’s first impressions of the site. Poor interface design was particularly associated with rapid rejection and mistrust of a website. In cases where the participants did not like some aspect of the design the site was often not explored further than the homepage and was not considered suitable for revisiting at a later date…The main reason that websites were rapidly rejected was due to the design of the interface. Design issues affected first impressions and could lead to the mistrust of a website.”

Here are some samples of what specifically some of the study participants had to say about the poorly designed sites:

“[On] one of them I didn’t like the color of [it]. I couldn’t wait to get out. It was an insipid green backdrop. It just put me off reading it.”

“There was nothing I liked about it at all. I didn’t like the colors, the text, the layout.”

“I found the screen too busy. I couldn’t quite latch onto anything straight away.”

As you can see, design has a significant impact on website visitors. Not only does it affect them, but as this study shows, it is the most influential factor in whether people trust or mistrust a site.

Most web designers know this without reading a paper, but this study confirms that design elements as simple as color, layout, text block size, and navigation can make a difference when trying to increase conversions online.

Just in case this study doesn’t provide enough proof for you, here is more insight on design from the realm of packaged goods.

Customer Perceptions and Packaging Design

Web design is similar to packaging design for consumer goods. In both cases, people pay for the product or service, but they’re also influenced by the “packaging.”

This is discussed in the book Blink by Malcolm Gladwell. Chapter 5 of the book discusses the effect packaging design has on customer perception, citing case studies from Cheskin, a well known marketing research and insights company.

Years ago, Mr. Cheskin, the company founder, came up with a theory that consumers don’t make a distinction between a product and it’s packaging. Instead, in consumer’s minds, the product is a combination of the packaging and the product.

Based on this theory, packaging matters a lot because it provides a customer’s first impression with a brand. Mr. Cheskin’s company went on to test this theory, and here are some of the results they’ve found:

• If you add 15 percent more yellow to the green on 7 UP packaging, people report that it has more lime or lemon flavor, even though the drink itself was left untouched.
• On a can of Chef Boyardee Ravioli, a picture of a close up of a real human face influences perceived quality more than a full body shot or a cartoon character.
• In the Hormel logo, adding a sprig of parsley between the ‘r’ and ‘m’ causes customers to perceive the products as being more fresh.

As these examples show, packaging impacts customer impressions so much, the perceived quality and taste of the products can be affected.

This is true for packaged goods, and it’s true for websites.

The application for web design

A website’s design often provides the first impression customers have of a company. If the design is outdated, disorganized, cluttered, or uses unappealing colors, it creates a poor first impression.

Going back to the original conversation used to introduce this blog post, after designing my client’s new site, I asked two co-workers whether they would be more likely to purchase from the old site, which was old and outdated, or the new site, which was built based on modern web design standards. Here’s what they had to say:

• “I would trust [the new site] because you would assume that if they have enough money to produce a nice looking website, they have enough money to pay for more security.”
• “I would buy from the [new] one. The [old] site looks too simple, almost as it was thrown together quickly, and it [has] too many icons down the right column which gives me a slight feeling that it may not be legitimate.”

Based on these answers and the studies above, good web design has a significant impact on potential customers.

If you’re about to build a site or if you’re considering a redesign of a current one, it’s not necessary for your website to be the most beautiful site online, but it does need to look good. It needs to convey quality and professionalism with an organized, uncluttered layout, good use of appealing colors, and text blocks that are easy to read.

These studies show that it’s worthwhile to invest in a good web design because in the end, customer perception is what really matters.

About the author: Joseph Putnam is a freelance writer and internet marketing consultant from Orange County, CA, who helps businesses use digital tools to increase sales online.