http://preview.ait-themes.com/guesthouse/wp/

http://www.pr4.com/

We’ve been talking about the tablet and web design together for nearly two years now, but always as the consumer device that we’re designing for. However, the tablet is not only for our consumption of websites, but also the creation of them through the availability of a bunch of great design-oriented apps.

From basic planning apps to code editors for the development of your site, the iPad has a nice selection and we’ll showcase some of the best today.

Adobe Ideas

Adobe Ideas is a digital sketchbook app from Adobe that allows you to draw out content on your iPad including finger-drawn wireframes and other planning-oriented drawings. Adobe Ideas is a great app to just sketch on, anywhere you are, doing so naturally with your finger.

Adobe Ideas features all the basic tools including size and opacity sliders for your mark. For an in-app purchase (which is marketed as a “premium feature” even though Adobe now charges for the basic app), you can also get layers functionality to build up your drawings layer-by-layer.

Adobe Ideas is a .99 app available in the App Store for iPhone and iPad, although layers require a .99 in-app purchase.

iMockups

Where Adobe Ideas is mainly a general sketchbook app, iMockups is something much more specific. Through its apt name, you can likely guess that iMockups is an app for creating mockups and wireframes for websites and iPhomne/iPad apps.

Like many wireframing tools, the main creation process consists of using a bunch of pre-design elements and arranging them on your canvas. When you have them on, modal controls allow you to move them to pixel perfection by using nudges or co-ordinates.

iMockups is great for rapid wireframing, especially when you’re away from your desk. It’s available on the App Store for .99.

Mocking Pad

Mocking Pad is another wireframing app with a similar story to iMockups. The app allows users to pull in a number of elements branded with the Marker Felt-style font that has become synonymous with wireframing apps.

Mocking Pad is .99 in the App Store.

OmniGraffle

OmniGraffle is one of the more expensive apps on the App Store, clocking in at .99, and it’s all about the planning stage. OmniGraffle is a planning app for creating diagrams, charts, wireframes and other layouts that’s promoted as being highly adaptable to a bunch of different situations including web and graphic design. OmniGraffle uses the multitouch input of your iPad to help you do everything from basic, freehand drawings to extensive, structured charts.

The app is available for .99 on the App Store. However, you should note that reviews criticise export limitations and the near-requirement to have a Mac if you want to edit files off the iPad since OmniGraffle is not available for Windows.

SketchyPad

One more wireframing app for iPad is SketchyPad. Like all the others, SketchyPad allows you to create wireframes and plans for your web designs on the go on your iPad. While the concept of what the app does is majorly the same as the others, SketchyPad does so with a little bit more color than the monochromatic-based elements of the others.

SketchyPad is in the App Store for .99.

Dropbox

Now we’re moving into the apps you can actually use in the creation stage of web design. Dropbox is more of a behind-the-scenes utility that can be used for syncing content between your multiple devices so a document on your iPad can be fully synced with your computer, and vice versa.

Dropbox is also integrated into some of the other apps on this list which has an almost-silent footprint on your workflow yet facilitates the syncing of your documents between devices.

Dropbox is a free app on the App Store and a free account will get you 2GB of storage space with paid, more spacious plans available.

Evernote

Evernote is a notetaking and archiving app that’s not web design-specific but can be used within a designer’s workflow. In web design, Evernote can be a great way of storing inspirational imagery and ideas to be later recalled across one of your connected devices.

This iPad app has been placed on a ton of honorable lists including the New York Times’ “Top 10 Must-Have Apps”. It is available for free on the App Store, with paid plans available for higher storage and other features, including offline notebooks.

Adobe Photoshop Express

Adobe Photoshop Express is another app from Adobe which is less focused on creating new images (like Adobe Ideas) and more on editing existing ones. That means, should you be using your iPad as a web design device, it’s really simple to do some light image editing including cropping, rotation, exposure/saturation manipulation and applying borders and effects.

Adobe Photoshop Express is available on the App Store for free. There is a .99 in-app purchase too which gives you the “Adobe Camera Pack”, a set of tools for your phone/tablet/iPod camera.

Textastic

Textastic is a versatile text editing app for iPad, an app I used to use a lot. Textastic includes all the basic functionality of a good text editor such as syntax highlighting, line numbering, line/character count, previews and more.

Additionally, Textastic is one of those apps I previously mentioned with Dropbox support, allowing you to work on a site on your iPad and have it sync to your other devices (and vice versa).

Textastic is available in the App Store for .99.

Gusto

Like Textastic, Gusto is a code editing application that allows the iPad to become a real productivity platform. Many Mac-based web designers choose to use Coda, and Gusto shares many similar features including a “Sites”-esque file system that organizes your files by each of your different products.

Of course, just like Textastic, Gusto includes all the basic traits of a good code editor including syntax highlighting, line numbering etc. Gusto also includes built-in support for file transfer over FTP and SFTP which shares some of the benefits syncing over a service like Dropbox provides.

Gusto is available for .99 in the App Store.

Typography Insight

Good typography is a fundamental element of good web design, and, for that reason alone, Typography Insight should be in any good web designer’s iPad toolkit. The app has a bunch of tools for trying out and comparing different typefaces through methods such as typing in a font, looking at them with different levels of zoom enabled and measuring.

The comparison tools may be the best feature, however, allowing you to put fonts side-by-side and on top to make more educated decisions about what to use in your work.

Typography Insight is relatively cheaper than other apps on this list, selling for .99 in the App Store.

CSS3Machine

CSS3Machine is an iPad app for creating CSS styles and trying them out in a preview. With the app, you can create various CSS styles including transformations, gradients and more, and then transfer them to your computer over WiFi.

The app is in the App Store for .99.

.net: Practical Web Design

.net is a web design and development-focused magazine covering topics like CSS, PHP, JavaScript and HTML5 written by “many of the world’s most respected web designers and creative design agencies”.

.net is a magazine available in the App Store, and issues are priced at .99 or available through subscription plans for three months (.99), six months (.99) and one year (.99).

So there you go, thirteen great iPad apps that should be on any good web designer’s iPad! If you have any suggestions, feel free to leave them in the comments.

Webdesigntuts+

Color calibrating monitors is an issue that’s existed in the design community for decades. But a recent Twitter debate between Amy Hoy, Peter Cooper, Thomas Fuchs, and Thijs van der Vossen about the subject raised a crucial question: is color calibration necessary in web design?

Thumbnail: Colorful Graffiti, available on Photodune

What is the Precedent for the Debate?

Color calibration began in the days of print design, and is still a very important issue for many designers working in the medium. Given the variability of color output in screens, combined with the differences in printers, designers have to calibrate their monitors and color profiles within the OS to match a standard in order to ensure proper color selection. This is where Pantone comes into play, as they provide an industry standard for color output. If your displays and printers are calibrated to the Pantone standard, then the color output (should) be accurate between the two.

OSX monitor calibration settings

As more print designers migrate, the question of standardized color output becomes more prominent. Does every monitor adhere to some standard akin to the Pantone standard? Should we calibrate our displays to meet the qualifications of this standard?

Thankfully, Microsoft and HP helped establish the sRGB color space, which has been adopted across most consumer level devices and is endorsed by the W3C. However, there is a lot of variability in device output; which ties back to the issue of calibration.

The Argument for Calibration

The greatest factor supporters of the principle bring to light is the importance of standards. We try to standardize everything (both as designers and developers), so why shouldn’t part of our design process (color selection) be standardized as well?

Chris Coyier posed the question to CSS Tricks readers recently, with a number of excellent responses in the comments. However, I feel the best argument for calibrating devices was presented by Shane Parker:

I don’t understand how this is even a question? Of course you should calibrate your monitor using known standards via a hardware calibration device. Will the majority of people who view your site also have a calibrated monitor? Of course not. BUT, it’s not like all uncalibrated monitors view the same way. Uncalibrated monitors are all over the place in respect to color, and that’s the biggest reason you should calibrate! At least you’ll know that you are calibrated to correct color so that those who are calibrated (or are using monitors that aren’t horribly off calibration from the start) will see the colors you intended them to see.

Garbage in = garbage out. If you start with garbage, you’re more likely to end up with garbage. As professionals, monitor calibration is one of the first steps in setting up a design environment (I’m a web dev and photographer, so it’s even more important for me to stay calibrated).

I agree with his argument: you should strive to be at the middle of the spectrum to reduce the offset from your audience’s devices. If your monitor is unwittingly skewed in one direction, then the results are going to be even more staggered on a device with a different calibration. At least when your devices are calibrated for the middle, the output will be “less wrong”.

The vast majority of designers seem to agree with his statement as well. The arguments against color calibration in web design are not admonishing the practice, but instead state that there are greater issues at hand than color tonality.

The Argument Against Calibration
(Rather, The Argument for Contrast)

The debate regarding color calibration cannot simply be defined as a “yay/nay” situation, because it comes down to an issue of priorities. Those who argue against calibration note the importance of contrast over proper color tonality in web design.

In a sense, if you know your display is adequate and “reasonably calibrated”, then you should not worry about achieving true color calibration. Instead, focus on accessibility and place precise and accurate colors as a secondary concern. Designs are meant to be easily readable and accessible. By focusing on color tonality with expensive and professional-grade equipment, the priorities of the designer are shifted in such a way that the user ends up suffering. While it can be argued that choosing the wrong tone of a color can change the user’s reaction to a design, there are two greater arguments which take precedent:

• People with bad displays are used to things being “incorrect”, because that’s the environment they work in. (Which Aaron Silber elaborates on quite nicely).
• With a focus of artistry, you can end up with a low-contrast palette which actually hurts your design upon execution.

Accessibility should always be at the forefront of site design, and focusing on color palettes based on subtle tonal shifts does not usually fit this ideal. Numerous examples can be seen at Contrast Rebellion, and it has been discussed many times on this site.

This one especially hurts because I love everything else about Reeder.

Interview With Patrick Kovacich
UI + UX Designer

I was able to interview Patrick Kovacich, a user interface and experience designer who also has a lot of experience with print (not to mention some of the coolest shirt designs I’ve seen) on the subject, and he was able to elaborate on the variability of device output:

It takes a certain level of genius and madness to come up with ideas like this.

I got my start in print layout before the web was much more than academic in use (mid-90s), and so I have a great deal of experience there. Even after moving over into web design and native application UI design, I have continued a lot of print projects on the side. I do primarily work on the web/screen, and the print work is the vast minority.

Visually, Adobe Fireworks and Adobe Illustrator. If I’m doing web work where the visuals are actually browser rendered I’ll use a plain text editor or Dreamweaver.

Mainly MacOSX 10.6, stock 17 inch Macbook pro screen (matte.) I do use a Windows 7 machine about 25% of the time, with a 20 inch Acer monitor and a Wacom Graphire tablet for some more artistic work. Most design work I do is not using a tablet, however.

No. The vast majority of my work is consumed by people who do not calibrate their monitor, and so I take deliberate care to not rely on contrast details that will only work on a perfectly calibrated cinema display or high-contrast-ratio plasma panel.

My target audience varies from iMac all-in-one displays to XP laptops driven by very cheap LCD panels, and so the value in me adhering to a set color profile and rigorously calibrating my display is not shared by my audience in the way it is by my print shops. I find that seeing proofs and sharing color profiles very easily resolves any issues I have had in working with them.

I tend to actually flip color profiles around to A/B test different configurations, and most critically, different brightnesses/LCD tilts. As more and more of my audience moves to laptop LCD displays and mobile devices, some of which have very narrow viewing angles, the hinge position of a laptop or positioning of a mobile device can actually alter a perceived color. This kind of real world experimentation lets me make sure that the critical parts of designs work regardless of the device and work environment my audience is in, and is more useful than assuming they will all adhere to my idyllic design conditions.

As I said, in print work there are ample tools to “translate” and verify we are on the same page with the end result, and print shops are generally capable of speaking a higher design language with me to get to a mutually satisfactory result. I do not have the luxury of demanding my on-screen audience go through this, and so I don’t worry too much about having my displays tuned to a standard that is meaningless to them.

Interview With Ian Yates
Webdesigntuts+ Editor

Ian Yates (our editor here at Webdesigntuts+ for the newcomers) was gracious enough to provide his thoughts on the subject, which I feel are essential to the discussion given his print-heavy background:

These days I work primarily in web design, though my first job within design was at a small ad agency in Rotterdam and definitely more print biased. I’ve been focused on the web for the last five years or so.

Owing to my roots being in print design and illustration I’m most comfortable with vectors. Sit me behind Adobe Illustrator and I’m a happy chap. Photoshop keeps me busiest where web design is concerned, which is odd as you’d expect Fireworks to have been a more logical home. I still always start out with pen and paper though – can’t seem to shake that habit

I have a quad-core Mac Pro with two Dell 22″ screens (which are great value). The Mac is only a couple of years old and was the logical upgrade from my old power PC, though if I’d have waited I might well have opted for a massive iMac instead. A nice, fat Wacom tablet is high on my wishlist, but there always seems to be something more sensible to spend my hard-earned pennies on.

When I was occupied with print, a lot of my work revolved around identity: logos, headed paper, stationery, exhibition stands, promotional materials etc. and that involved a lot of careful color work. A properly laid out visual identity package includes a specific Pantone palette, often fairly restricted, as more colors make for higher printing costs. Working with Pantone colors in your documents (instead of CMYK, for example) means that the printed result is a dead-cert; it will look exactly the same as any other printed products with those colors (assuming the printer does the job properly.)

When working for print, it’s advisable to calibrate your monitors so that what you’re seeing is as true to the actual printed output as possible. Personally I was hopeless at it. I was forever holding Pantone swatches up to my screen thinking “am I really using the right tone here?!”

In terms of the web, I’m not sure it’s so relevant. I haven’t really given it much thought before, because there’s no way you can emulate precisely how users see your work. These days, I go for default, out-of-the-box calibration.

I’m not sure you can. You have to accept that users have many different screens, different devices, and different calibrations. There’ll even be discrepancy between identical screens of a different age. It’s a fact that the majority of users probably won’t experience your work exactly the way you intended. Go for the mode average – most people will use their devices as they come off the shelf.

Conclusion

The Pantone standard works because the print industry widely adopted it, and practitioners consistently maintain their devices to ensure calibration. But the same cannot (and should not) be expected from most web users; some devices may never have been calibrated at all. This is where the “dirty window to the Internet” argument is most valid: the problem of your site not rendering properly on a display is generally a greater issue with the display itself.

If you have the time and resources to calibrate your device, or if having a wide color palette is essential to your work, then you should calibrate your monitor. However, in most cases, color calibration becomes a non-issue once a designer comes to terms with the fact there is no standard output on the web like there is in print. Instead, strong color contrast and accessibility are much more important factors which must be considered in web design.

It’s been a pleasure to write this article, and I hope everyone enjoys reading it as much as I enjoyed writing it! As always, feedback is greatly appreciated.

Webdesigntuts+

As Ferris Bueller famously said “Life moves pretty fast; if you don’t stop and look around once in a while, you could miss it”. Let’s heed his sage advice and take a moment to look around some web design trends we witnessed in 2011.

The web is an ever-changing beast, full of flaws and imperfection and experimentation. – Dan Cederholm

Responsive Web Design

Responsive Web Design is becoming a bit like a brilliant, yet over-played song. It seems like everyone has had their say, and Ethan Marcotte’s agenda has never looked healthier. There’s good reason for this though; the concept is simple, the motives are logical, the technology is straight-forward and the results are extremely satisfying.

2011 saw an explosion in the number of websites built responsively, and the beauty of it is that we’re all involved in developing the process. It’s still in its youth, designers and developers are concocting new approaches all the time, and we’re a long way off nailing down any real best-practices. Should we first design for large screens and use media queries to gracefully degrade our designs for mobile? Or should we design for mobile first, progressively enhancing for more capable devices? Paul Irish kicked off an interesting thread over on GitHub if you’d like to dive into the discussion.

One thing RWD has shone a light on is the focus on content. Aside from all other factors, the content of any given website is what’s important; the meat-and-two-veg needs to be legible, accessible, and clear on any device. Designers are certainly taking this on board as is evident in many of 2011′s emerging websites.

When all’s said and done though, even if you’re a little tired of seeing yet more RWD tutorials and articles cropping up, stay tuned. 2012 is going to see big developments in the way we all approach it.

Grid Systems

Partner in crime to the responsive layout is the grid. 2011 has seen fixed grid frameworks make flexible improvements, not to mention the appearance of even more tools to help us out. All of the following frameworks, tools and guides cater for today’s needs and offer fluidity. Most of these sites also demonstrate great responsive design, as the 1:1 thumbnails below show:

Typography

Obviously, typography isn’t a discipline which has emerged in 2011, but it’s an area of web design which continues to grow and is facilitated more than ever by web fonts and services.

Two noteworthy aspects of typography are the aesthetics (web fonts are allowing designers to indulge themselves) and the growing understanding that type exists primarily to be read. Fonts don’t have to be microscopic to appear chique, and the emphasis on content first is pushing us towards a web full of big and beautiful type.

Technology Pushing Art

2011 has seen huge leaps forward in terms of browser capabilities (and version numbers!) Even Microsoft recently conceded that automatic updates for Internet Explorer are probably a good idea. All of this means that web designers have more toys to play with in terms of HTML and CSS, which understandably leads to creativity as a result of technology. The ‘because I can’ approach, if you like.

Scrolling, Vertical Narratives

I can’t think of a better title for this bit, sorry. So what am I talking about? Vertical scrolling.

It’s a daily task for web designers to play down the importance of the fold. The fold is impossible to define, what with the plethora of devices and resolutions these days, so content “being above it” shouldn’t be a client’s number one priority in a design solution.

We’re embracing vertical scrolling. The rise of mobile devices has reminded people that they can scroll and there is relevant content below the first few pixels of a web page. Some designers have taken this to the next level and made scrolling a fundamental part of the browsing experience.

One approach is in subtle parallax effects.

Note: The images below obviously don’t do the websites justice – go and check them out (and get your mouse wheel ready..)

Then there’s the idea that some content can scroll up to a point. 2011 saw wide use of this effect; keeping social icons, shopping carts, menu bars, calls to action etc. persistantly in view:

So how’s this achieved? Often, a combination of jQuery and CSS positioning. Here are just two resources to help you out:

Some sites have taken the concept even further, animating elements and calling events when certain vertical points on the page are reached:

And then there are examples which take scrolling down a web page into a totally new dimension (really, check this one out)..

Like it’s 1983

Diagonal is awkward, it doesn’t play along with today’s grid-based surroundings, but for some reason oblique lines have been popping up all over the place during 2011. It’s like a kick-back to a time even before mainstream internet, and you’ll find other visual reminders of that era too; odd color combinations, lighting effects, beige and bronze. Weird.

I can’t help but be reminded of old magazine ads with their abstract diagonal lines, display serifs, big hair, Joan Collins and pearls. It’s a look which is oddly appealing..

Modular Interfaces

Approaching layouts in a modular fashion is again something favored by Responsive Web Design. Managing areas of a design in modular chunks allows fluid repositioning and segregates content clearly. You could argue that the rise of modular interfaces is down to the influence of apps. Increasingly we find ourselves publishing (and accessing) web content via external apps such as Facebook and Twitter; the lines are blurring between desktop screens and handheld devices.

Grab this awesome psd of the latest Twitter UI from Smashing Magazine!

Themeforest

I asked Themeforest review maestro Ivor what he’d seen happening on Envato’s number one marketplace during the last year. He observed a couple of trending aspects:

• The portfolio layout is still dominating the market.
• Responsive Web Design and Mobile-focused sites are hot.
• Minimal Design has been consistent throughout the year.

2011 was the year of Minimal Design in ThemeForest – Ivor Padilla

You don’t have to look deep into the Themeforest archives to see what he means either..

Over to You

There’s no way I covered every significant development in the web design of 2011, so pitch in with your comments! Which trends struck you in 2011? Where do we stand at the moment, and where do you think things are going?

Webdesigntuts+

With the continuous growth of the Internet, online marketing has gotten bigger every year, and along with it, the advertising industry. One major factor in all this craziness is buying and selling ads.

Now, it takes time to make a successful ad. One that would get you lots of visitors and a high conversion rate depends on how well it caters to a specific audience and how clear and to the point its message is. But let’s not forget: before a user can read an actual banner it’s important to see it and be drawn to it. That’s where we, web designers, come in. Our job is to make a strong first impression and then deliver the message in a visual manner that’s easy to understand and to the point.

So, join me in this “lengthy” quick tip as I show you some basic elements of an ad banner and then demonstrate how to design a banner set for a web hosting company.

Note: I initially anticipated this to be a quick tip, but things kind of got out of control and I ended up making a longer video. I just hope the surplus information will come in handy

Part 1: Introduction

Part 2: Designing the Banners

Good Practices

Some good practices to keep in mind when designing ad banners:

• Keep it short and simple.
  Banner ads are displayed amongst large amounts of information in a webpage, so you must be creative to get the user’s attention. And, because they get limited display areas, it’s really important to keep them simple and easy to understand.
• Less is more.
  Use larger fonts and fewer words because people simply don’t have the time or patience to read long messages.
• Keep the file size low.
  Typically, 70Kb is a good size for a banner. Many websites you’ll advertise on will have file size limitation, but in case they don’t, it’s always a good thing to have fast loading banner ads. So, keep this in mind and don’t make the file size too large.
• Choose the color scheme in context.
  A general rule here is to design the banners while keeping in mind where exactly they’ll be displayed. More specifically, try choosing colors based on the background they’ll be sitting against. For example, if you have a dark blue background, it would make sense to have a banner with a white or light blue BG to create good contrast.

Structure of a Banner

• The Heading.
  This is used to grab the user’s attention while scanning the page.
• Call to Action.
  This is used to explain to the user how to proceed. I mean, most people would just click the ad anyway, but don’t assume they’ll all do it. Provide some visual cues as to what do to next. This can be a button or an image, or just some text that says “Click here to…” “Find out how…”
• Attention-grabber (optional).
  This is optional, but if implemented correctly, it can help you grab the user’s attention. It can be an interesting illustration or graphic.

Additional Resources

• Ad Banner Guidelines from iab.net
• Photoshop Grid Patterns from premiumpixels.com
• Surprised Business Man Stock Photo from photodune.net

Webdesigntuts+

Mastering the art of character design is something that takes both a lively imagination and a good understanding of drawing techniques. Today we have have bundled together a collection fun and lively character design tutorials from the Vectortuts+ archives. Covering a variety of subjects from sketching to rendering there’s plenty of projects to help you imagine and create your own fantastic characters.

• 

  How to Create a Web Site Mascot

  In this tutorial, I’m going to give an overview of how developed a character from the initial brief through to the final site mascot and then to go on to create several poses for different parts of the site.

  This character was originally made for an Envato site which didn’t take off, and the artwork wasn’t being used, so I’ve reworked this a bit to become a Vectortuts+ character. Let’s check out the process of making this website mascot and learn loads of tips along the way!

• 

  How to Cell Shade and add Texture to a Vector Comic Character

  This tutorial will show you how to create a cell shaded character in Adobe Illustrator, this is a fast technique utilizing the Live Paint bucket for block coloring, the gradient tool to add depth and form, and masked blended shapes for texture.

• 

  How to Create a Cute Bunny Vector Character

  In this Illustrator tutorial, I will show you how to create a cute bunny character. This tutorial uses simple shapes and gradients that are easy to apply to other character illustrations. The great thing about his tutorial is you don’t have to be an amazing artist to create it!

• 

  How to Color a Cute Character using Graphic Styles

  Coloring a character sketch can sometimes take much longer than anyone expects. With a few layer tricks and Graphic Styles, I will show you how to create a character that is quick to ink, easy to edit and a breeze to re-color. Let’s get started!

• 

  Create a Twitter Style Bird Mascot

  Using some basic shapes, effects, and gradients I will show you how to create a Twitter mascot for your blog or website. Twitter is a popular free web service for social networking and micro-blogging. You can follow Vectips, Sean Hodge, or Collis Ta’eed on Twitter as well!

• 

  How to Create a Fantasy Character in Illustrator

  This tutorial covers the process of creating a fantasy pinup illustration with Illustrator CS3. This tutorial uses Live Paint, so you will need CS2 or above to follow. If you need an alternative method for a legacy version of Illustrator, please download my Creating Comics with Illustrator tutorial tutorial, which includes instructions for that.

• 

  Give a 3D, Vector Robot a Realistic Feel in Photoshop

  In this tutorial you are going to learn how to combine different methods from Illustrator and Photoshop to enhance your 3D vector art. Through the process you will learn how to use the appearance panel, 3D extrude and 3D revolve. You will also create a custom art brush, and your own symbol. I am going to show you how to create masks using Channels and Layers, as well as creating Clipping Masks in Photoshop.

• 

  Create a Super Happy Octopus Character

  In Illustrator it’s really easy to create fun characters with some simple shapes and the Pathfinder Panel. In the following tutorial I will explain how to create a Happy Octopus Character. You can use these techniques and elements to create whatever character you want!

• 

  How to Create a Vector Illustration and Prepare it for Micro-Stock Sale

  There are numerous micro-stock websites that vector designers can design for and make consistent earnings through. Envato runs a few stock sites, such as Graphic River, which you may be interested in participating in. You may find the article on Freelance Switch about making money through selling your work on stock sites enlightening as well. There are some great tips in that article.

  I have quite a bit of experience working with Shutterstock and iStockphoto. This tutorial details a professional workflow for creating vector illustrations and prepping the artwork for these sites. I’ve also included a bunch of time-saving tools and tips as well. Let’s get started!

• 

  How to Illustrate a LeBron James Cartoon Character

  Hello fellow vector artists, I am a cartoonist/illustrator who specialized in retro style vector cartoons. You can find more of my work and books at my web site. In this tutorial, I’ll show you how I use Adobe Illustrator to create vector cartoons.

• 

  How to Create a Cartoon Character with Expressive Lines

  Cartoon character drawing covers a lot of techniques and styles from one color characters to multilayered colorful ones. In this tutorial, I will cover the necessary steps for creating a colored multicolor cartoon character that includes shadings. I used Adobe CS3, a Wacom tablet, an inked drawing, and scanner. With your tools ready, let’s get to it!

• 

  How to Illustrate a Cute Emo Kid

  We’ve recently included some funny looking cartoon style silhouettes on our website, so in this tutorial I will take you through the process of drawing these cuties. The concept is based on the Emo trend and I will take you trough all the steps from sketch to full color vector. I am using Illustrator CS3, pen, paper, scanner, and Wacom tablet.

• 

  How to Turn a Sketch into a Fat Cat Vector Illustration

  This tutorial aims to guide you from sketchbook to screen; a "Fat Cat" doodled with biro translated into a neat vector caricature. Intermediate knowledge of Adobe Illustrator is advised. Let’s take a look at how to create a cheeky cat illustration – from initial concept through to vector goodness.

• 

  How to Create a Stinking Zombie Flesh-Eater in Illustrator

  In this tutorial, I will show you how to create a cartoon zombie in Illustrator. Starting by creating a fresh corpse, we will then ‘yuck’ it up using a number of techniques. Let’s ‘rip’ this one apart!

• 

  Create Character Driven Book Cover Art Using Illustrator and Photoshop

  In this two part tutorial on creating the "Let’s Go To Monster School!" book cover, I’ll show you a complete process from initial sketch to the final artwork, using an Illustrator to Photoshop integrated workflow. In Part 1 we will employ Illustrator to trace our hand drawn sketch, lay down the shapes and define the basic colors.

• 

  How to Design a Cheeky Koala Mascot Head

  We’ll use some opacity masks, brushes, gradients and effects, in addition to an easy shading technique you’ll find yourself using in plenty of other projects. Get ready to tuck into this Aussie-flavored tut!

• 

  How to Create Typeface Characters

  I started a character design project that merges typefaces into unique monsters, cute animals, and various other font inspired character creations. The method is simple, I take different sections of the characters of a specific font and I put them together, giving birth to different kinds of creatures.

  The interesting thing about Typefaces is that each font gives a different aspects to the characters. That is the essence of Typefaces – Faces with Type. Learn the basics of how to create these fun characters!

• 

  Make a Fun Holiday Reindeer Illustration

  Take an in-depth look at the process of designing and illustrating a holiday reindeer illustration. This tutorial covers illustration style, color selection, shading and touches on typography. The process of adapting your illustration during creation is also covered. This tutorial is created by Jesse Hora and Darrin Higgins. Time for some holiday fun!

• 

  How to Create a Cute Snail Using Adobe Illustrator

  In this tutorial we will learn how to draw a snail using tools such as the Pen Tool (P), Selection Tool (V), Direct Selection Tool (A), Ellipse Tool, and Gradient Tool (G). Some shapes will be created with the help of the Pathfinder panel. This artwork was created by my student Artur Chochaev.

• 

  How to Create a Killer Chainsaw Bunny Character

  This tutorial shows you how I build a Bucket ‘o’ Thought character and add a dynamic background effect. This process can be applied to any sketch you are vectorising. It takes some knowledge and skill with the Pen tool, but gives you ultimate control over your line work. In this tutorial, I will constantly refer to a tools’ quick key, learn your quick keys people, it makes things so much easier!

Vectortuts+

http://brandingbygarden.com/

http://www.dotnetcmsportal.com/

http://mytorontodesign.com/

http://roleski.pl/

http://www.dzinemart.com/

We’re pleased to announce our 7th in-depth course available to Tuts+ Premium members: Identity Design with Ben Gribbin. Over 18 lessons and nearly 3hrs of video training, you’ll learn all the foundational skills needed to start doing identity design work for clients. This includes: research, brainstorming, sketching, designing a logo, business cards, print flyers, web elements (such as banner ads), as well as timescaling, pricing and where to find clients.

Not a member? Not to worry! There are four public lessons available. Links after the jump.

Public Lessons

• Introduction to Identity Design – We’re going to first look at what Identity Design is and consider what the main differences are between a logo, a brand, and an identity.
• Understanding and Interpreting the Design Brief – We’re going to look at what is often the first step in an identity design project: the design brief. We’ll look at what a design brief does and how it effects your design process.
• Brainstorming & Sketching – Today we are covering sketching and brainstorming. Specifically we’re going to look at brainstorming an identity design project.
• What is a Logo? – We’re going to cover just exactly what a logo is and what makes a good logo. A logo is not a brand. So just exactly what is a logo and where does it fit in your brand?

If you’re on the fence about joining, try becoming a member for a single month, and see how it goes! We have a 30-day, no questions asked, money back promise.

Members: Get Started!

Make yourself a cup of coffee, a pot of tea, or a cool glass of water – and get started with the first lesson!

Questions?

If you have any questions about the Tuts+ Premium service, just leave a comment; I’d be glad to help out any way that I can.

Psdtuts+

Looking for a new web design job? The FreelanceSwitch Job Board is a great resource of freelance gigs and opportunities. New opportunities are posted every day for web designers, and come from a wide range of potential clients. Today we’re showcasing a few of the latest positions that might be perfect for Webdesigntuts+ readers!

Web Developers and PSD to XHTML/CSS/Javascript Experts

Budget: 0 to ,000 — Location: Anywhere

We’re looking for freelance web developers to lend a hand for a few projects we’re working on.

We’re looking for web developers who have a good experience of building things on the web, and have big ambitions when it comes to delivering development. If you have experience working with…

• HTML5 & CSS3
• XHTML & CSS2
• jQuery & Javascript
• WordPress
• PSD Conversions
• RoR
• PHP, MySQL / LAMP

We have a high standard and quality verification office for the coding and development, we use basecamp and provide with free accounts for dropbox for our most talented people, we want to work on long terms so we will pay invoice for services weekly.

Find Out More

Senior Web Designer

Budget: ,000+ — Location: Columbia, MO

The primary purpose of this role is to provide senior graphic design services on an on-going basis for Veterans United Home Loans and its divisions. This position will also assist with the creative and art direction of projects, and marketing communication campaigns.

The Senior Graphic Designer will assist the Graphic Designers and direct them on the layout, design and production of projects.

Find Out More

Website UI Designers

Budget: 0 to ,000 — Location: Anywhere

Do you have the creative sense for User Interface (UI) Design? Then, we are inviting you to showcase your talent now. Exvo.com is looking for web UI designers who are expected to do the following key functions:

• Create user-friendly UI designs and applications which maintain a consistent look-and-feel for each of the Exvo applications
• Work on a variety of projects that require a passion for the user experience and an eye for detail
• Work closely with our Front-End Development team to understand user needs and create interactive mock-ups by using Adobe Fireworks
• Contribute to the user experience and continually improve interface designs

Requirements:

• Extensive experience in user-friendly UI designs- Must be creative and open to new technology- Must have vast knowledge and application of Adobe Fireworks

Note: Be ready for a quick skills test!

Find Out More

Freelance Designer for Web App

Budget: ,500 to ,000 — Location: United States

We’re developing several Web applications that gather specific information from the user and then display relevant information to them.

We’re looking for a talented designer to work with our content team to design the GUI for the Web app, basing it off our existing website design and color scheme (to be provided). We would also like to find a provider who can, upon design approval, create valid HTML/CSS markup for the design, though this is not required. Please note, however, that you will NOT need to code the functionality of the application; you would only need to provide the GUI markup.

Applicants should have experience building Web application GUIs and experience in user experience design and concepts. You also MUST be based on the United States and agree to not outsource any aspect of the project.

To apply, please provide links to samples of Web application GUIs you’ve developed as well as what hourly rate you charge. Please also indicate whether you can provide HTML/CSS markup services.

Designer must be willing to sign a non-disclosure, confidentiality and transfer of ownership agreement. Applications without work samples or hourly rate will not be considered. Non-U.S.-based applicants will not be considered.

Find Out More

And Lots More…

These are just a handful of the positions currently being offered over at at Job Board, so be sure to head over and take a look at the full selection. We also have a few RSS feeds that will keep you updated with new openings, and you can even choose only to hear about those specific to web design!

To apply for any of these jobs, simply pick up a FreelanceSwitch membership for an affordable a month. See something you like? Join now!

Webdesigntuts+

“What did you find most memorable about the world of web design in 2011?” That’s the question I posed to some of our industry’s shining stars last week. One word cropped up more than any other (can you guess?) and everyone had plenty to say. See for yourself after the jump, and let us know what rocked your boat in 2011!

The Contributors

A huge thanks to everyone who gave up their time in contributing to this article. We’ve collected commentary from Authors, Designers, Developers, UI & UX Architects, Speakers and Community Experts from all across the globe. Here they are, in no particular order.

Jump to any Section of this page quickly by following a link below:

• Steve Fisher Yellow Pencil
• Sarah Parmenter UI Designer
• Vitaly Friedman Smashing Magazine
• Paul Irish Google Chrome
• Harry Roberts CSS Wizardry
• Jonathan Snook Web Designer and Developer
• Janna Hagan .net Young designer of the Year
• Paul Boag Headscape
• Veerle Pieters Duoh!
• Aaron Weyenberg UX Lead, TED Conferences
• Eivind Uggedal mediaqueri.es
• Peter Gasston Top10
• Aarron Walter MailChimp
• Lea Verou Front-end Web Developer

Steve Fisher
Yellow Pencil

The web is not fixed width. Responsive design has helped us really understand that.

For me 2011 was the year where I feel like the web industry finally came to grips with its medium. The web is not fixed width. Responsive design has helped us really understand that. Not only that, it has helped our clients, the people we make these wonderful websites for, understand it. Abstracting our content, understanding its message, and informing our design decisions through that lens transforms how a website is created. I’ve never been more excited about web design as I have been this year.

Steve Fisher
web: hellofisher.com
twitter: @hellofisher
dribbble: hellofisher

Sarah Parmenter
UI Designer

I’m hoping responsive design isn’t so much a buzz word in 2012 but becomes entirely part of what we do.

The rise of responsive design and content strategy has been most memorable to me in 2011. It’s been a big year for both of these assets this year, and one that I’m entirely behind. I’m hoping responsive design isn’t so much a buzz word in 2012 but becomes entirely part of what we do, and that we see more people understanding why the content of our websites is important, and to stop designing with “Lorem Ipsum” text.

Sarah Parmenter
web: www.sazzy.co.uk
twitter: @sazzy
dribbble: sarah

Vitaly Friedman
Smashing Magazine

we are getting better at working on the core of what design actually means

Most memorable for me was the growing acceptance of Responsive Design in the community. The times have changed and this year we started to completely rethink and reconsider how we approach Web design and how we find solutions to the new challenges caused by the myriad of mobile devices.

I feel that right now we are getting better at working on the core of what design actually means: communication and problem-solving. And it’s exciting times to be a part of it. Seeing how responsive mindset is getting established in the various part of the Web design — be it audio/video, forms, navigation, ads etc. – is just intoxicating. I am sure that 2012 will bring us many new techniques that will benefit end users and improve the experience of Web users. And I am looking forward to those times!

Vitaly Friedman
web: smashingmagazine.com
twitter: @smashingmag
google+: vitaly

Paul Irish
Google Chrome

The ecosystem of tools has blown up in 2011

On a scale from blogs to webapps, there is a lot of grey area of how our best practices best apply to enhance the work. A clearer understanding of the inner-workings of browsers helps identify the best techniques, and thus creates the best possible user experience. Meanwhile, the ecosystem of tools has blown up in 2011: things like Sass & Compass, CodeKit, LiveReload, and ImageOptim are not only doing work for us, but can also solve browser support issues on our behalf. I’m eager to see what 2012 has in store to help create the most ideal authoring experience.

Paul Irish
web: paulirish.com
twitter: @paul_irish
google +: paulirish.com/+

Harry Roberts
CSS Wizardry

Pure CSS logos (yak!)

For most people, 2011 has been a year of responsive design, CSS experiments, pure CSS logos (yak!) and parallax scrolling.

For me, 2011 has been a year of powerful, pragmatic and performant front-ends. What some might see as the duller end of the spectrum I’ve been seeing as a more challenging, interesting and useful side of web development. As UIs get more complex, we need ways of keeping their code simple, as devices begin to vary, we need ways of keeping code performant. Whilst most people have been burying themselves in media queries and CSS3, I’ve been going back to the drawing board and working on modular, scalable, good ol’ normal CSS and front-end development.

Harry Roberts
web: csswizardry.com
twitter: @csswizardry
dribbble: csswizardry

Jonathan Snook
Web Designer and Developer

We used to have a very singular perspective: the 1024 pixel wide desktop.

What I’m finding most memorable is the shift in how we think about and build web sites. We used to have a very singular perspective: the 1024 pixel wide desktop. It has taken the explosion in mobile and tablet devices to force us to think about how we design and serve our content in better ways.

Jonathan Snook
web: snook.ca
twitter: @snookca
flickr: jonathansnooka

Janna Hagan
.net Young designer of the Year

It’s exciting to see the different directions this industry can take.

Most memorable for me during 2011 was the rise of responsive design with HTML5 and CSS3. It’s exciting to see the different directions this industry can take and how quickly technology can change within a year. This kind of change is inevitable and we must be able embrace it as creatives.

Janna Hagan
web: www.jannahagan.com
twitter: @_jannalynn
dribbble: _jannalynn

Paul Boag
Headscape

2011 has to be the year of mobile.

2011 has to be the year of mobile. We have seen a continued explosion in mobile web usage and the emergence of responsive design as a solution to the challenges this presents.

It is now possible to adapt any website to work better on mobile devices without excessive expenditure. Best of all, new builds can be constructed from the ground up to function across almost all devices (both present and future). This can be done at a fraction of the cost of previous solutions.

From my perspective this is a huge step forward.

Paul Boag
web: headscape.co.uk
twitter: @boagworld
podcast: boagworld.com/podcast

Veerle Pieters
Duoh!

2011 has changed my way of thinking when designing for the web.

Up to a certain point, 2011 has changed my way of thinking when designing for the web, because of the ever emerging mobile web. While designing I try to keep in mind that a mobile version of my design is possible. Depending on the type of site/project, and a few other parameters, it could go as far as creating a fully responsive design. When this is the case, my usual thinking path needs a lot of adaption, because I tend to forget boundaries and limitations for a bit when I’m in the middle of my creation process, because it has lead me to my most creative and successful designs.

Certain basic criteria are easy to keep in mind at all times, even in the middle of my process, but smaller obstacles are kept as a CSS challenge for me to try to solve later on. This way I also force myself to think more creatively during the coding process, and I try to push boundaries as well. With a fully responsive design, I need to keep more of these boundaries and limitations in the back of my head, and so it makes my typical way of designing that I’m so used to much harder. The challenge lays of course in finding the right balance between keeping some basic limitations at the back of my head, while still giving myself enough freedom to try to create a unique design. The fact that we also can add a level of animation in our designs is another factor that plays its role in this way different way of thinking.

Veerle Pieters
web: veerle.duoh.com
twitter: @vpieters
dribbble: veerlepieters

Aaron Weyenberg
UX Lead, TED Conferences

..you can’t avoid it..

Most memorable to me in the web design in 2011 was the rate at which responsive design is being adopted by the design and development community. Over the last year there have been more tools, plugins, resources, tutorials and conference talks on this approach to web design than any other topic I can think of.

I’m still not convinced on the long term practicalities of this technique, but you can’t avoid it — everyone should be competent enough in what it is and how it’s done to decide if it’s the right approach to any given project.

Aaron Weyenberg
web: aaronweyenberg.com
twitter: @aweyenberg
dribbble: aaronweyenberg

Eivind Uggedal
mediaqueri.es

More and more web designers choose fluid grids in favor of fixed grids.

The growth Responsive Web Design has seen during 2011 was something I never imagined when I launched mediaqueri.es in January.

Not only has the amount of sites that are suggested to me risen, but more and more web designers choose fluid grids in favor of fixed grids. We’ve also seen several high profile sites like The Botson Globe and Barack Obama being relaunched with responsive or adaptive designs.

eivind_uggedal
web: uggedal.com
twitter: @uggedal
github: uggedal

Peter Gasston
Top10

If you make your living from building the web you can’t fail to be heartened by this flourish of new life

I’d say that Microsoft’s announcement of IE10 was the biggest surprise of the year; not only did it come on the heels of the release of IE9, but the previews showed it to be fast, standards-compliant, yet still experimental in the right ways. And not only that, but it would be used as the basis of the Windows 8 tablet OS – a real mark of trust in open web technologies by Microsoft, and a sign that they aren’t ready to concede defeat. I firmly believe that strong competition around open standards is a great win for the user, so this was definitely the most memorable moment of 2011 for me.

I think it’s been a really exciting year for our industry; the explosion of web browsing away from the desktop, HTML5 beginning to prove itself as the best option for cross-platform development, the newly-resurgent Microsoft making good browsers again… if you make your living from building the web you can’t fail to be heartened by this flourish of new life. There’s been a great appetite for discovery of new browser features, with lots of demos being made using cutting-edge and experimental CSS, HTML and JavaScript, so the curious amongst us have had plenty to satisfy us.

Slightly less pleasing was that the combination of the web explosion and the appetite for new features has led to making some people impatient, and leading to cut corners: people stating that they’re not going to support legacy browsers on their websites, or making demos and examples that provide no fallback for non-supporting browsers (and are not maintained when those browsers do implement the relevant features). So here’s looking forward to making the web work well for everyone in 2012.

Peter Gasston
web: www.broken-links.com
twitter: @stopsatgreen
book: The Book of CSS3

Aarron Walter
MailChimp

2011 was a year of design.

2011 was a year of design. Google redesigned Gmail, Reader, Maps, Search and many other web properties, and for the first time it appeared that designers not engineers were shaping the direction of their interface. Facebook acquired a great deal of design talent, and gave an impressive preview of their new story-based profile pages at their F8 conference. No doubt their acquisition of Gowalla will influence the design direction they pursue in the new year.

And the loss of Steve Jobs in October has so many of us reflecting on the role of design in the world. It stirs our passions and inspires innovation. Design was on our mind a great deal in 2011, which has set the stage for some big things to come in 2012.

Aarron Walter
web: aarronwalter.com
twitter: @aarron
book: Designing for Emotion

Lea Verou
Front-end Web Developer

The best is yet to come.

During 2011 we saw many advances in our field. Responsive web design evolved from a cool extra touch to being a necessary part of every website, CSS gradients became popular and were pushed to their limits, CSS and JavaScript preprocessors gained traction as “the new workflow“, new layout techniques finally became somewhat viable, new APIs made things possible that used to need plugins or server-side code…

However, what I consider more memorable is not the individual technologies and techniques but the bigger picture. We’ve always had cool new toys to play with and make our work better. I think the last few years, especially 2011, will be remembered as the first time in history when browsers are fiercely competing for the attention of web developers, not against each other but towards the common goal of supporting open web standards.

If we tried to describe our times to the web designers of the past decades, they would have a hard time believing us. Let’s stop complaining for a moment and acknowledge how far we’ve come and how much better we have it now. Even better, the best is yet to come. Fasten your seatbelts, fellow webbies, because the train of progress is moving into high gear!

Lea Verou
web: lea.verou.me
twitter: @leaverou
github: LeaVeroue

Your Turn

So, what was most memorable for you in 2011? Let us know in the comments!

Webdesigntuts+

http://www.sahycart.com/

http://www.herewecom.fr/

http://www.marcusfriberg.com/

http://www.curlykale.net/

http://www.eyebuydirect.com/

http://vilniausdenticija.lt/

http://roseraj.godgift.in/

http://burgeralaune.com/

http://html5master.com/

http://rockstarworking.com/

A while back, we asked Webdesigntuts+ readers to weight in on the state of the industry in the 2011 Web Design survey. And boy did you ever! Over 5,200 of you responded and shared your experience with web design. All respondents who provided an email were entered in the grand prize drawing to win an Apple iPad 2 and the entire Rockable Press library of e-books, more than 00 USD in prizes. I’m happy to say we have a winner! Read on to find out about our winner and get a sneak peek at the results of the survey.

Congratulations go to Michael Freytag! He’ll receive a 32GB wifi Apple iPad 2 and a copy of Rockable’s entire line-up of ebooks. I asked Michael what he thought of the survey and the state of web design:

To see the changes in the web over the past 13 years and where its going is amazing. With web sites being able to be viewed in such a variety of ways, the design and development have a serious impact on the users’ experience. Being a member of Tuts+ for the past year has been worth it; it’s been a great resource. With the different articles on the latest technology, designers and developers are able to keep up on their education and share their experiences. I’m glad to have helped provide data for the Web Design survey. It will be great to see how the web design and development community is growing.

Once again, congratulations to Michael!

The full results of the 2011 survey are going to be shared in the up-coming book “Web Design Confidential” published by Rockable Press, but I wanted to thank everyone for participating by giving a sneak peek of what turned out to be some really interesting, surprising results. For example, we asked web designers about their education and skills:

The majority of web designers found their formal education was only marginally relevant to their work. However, most designers also indicated learning new skills was vital to their job and on-line learning from web tutorials and articles were voted as top resources. Most of us are aware that it takes more than a simple degree to make a good web designer, but when I dug down into responses, I was surprised to find what other factors made a huge difference to success.

We’ll be looking at all that and more in the results of Web Design Confidential, but I would love to hear your thoughts now! How was your education relevant to web design? Is a college degree worth it for a web design career, or is there a better way to get your start?

Webdesigntuts+

In this tutorial we will show you how to create a detailed audio receiver icon using Photoshop’s vector editing capabilities. Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

• Powered By Envato API logo

Step 1

Open Photoshop and create a new document sized at 900 px wide and 500 px high with resolution of 72 px/inch.

Step 2

Use the Rounded Rectangle Tool (U) with radius of 5px to draw light grey (#f0efef) rectangle. This rectangle will be the base of our receiver. Apply Bevel and Emboss from Layer Style panel.

Step 3

Cmd/Ctrl-click on Vector mask thumbnail to create selection, create new layer on top, add Clipping Mask, fill layer with white color, and then add noise by choosing Filter > Noise > Add Noise from the main menu with settings of 30%, Gaussian and Monochromatic.

Blur the noise by choosing Filter>Blur>Motion Blur with an angle of 0 and a distance of 55 pixels, to create brushed metal effect. Apply Gradient Overlay to this layer, change Blend Mode to Multiply and set Opacity to 80%.

Step 4

Pick up Rectangle Tool (U) and draw small black rectangle – “foot”, apply Gradient Overlay from Layer Style, and position this layer below receiver “body” layer.

Draw another black rectangle using Rectangle Tool (U) just below “foot” layer.

Repeat the process to create the other foot.

Step 5

Create grey (#6e6e6e) rectangle, using Rounded Rectangle Tool (U) with radius set to 3px and apply following layer styles.

Position this rectangle below receiver body using the image below as reference.

Step 6

Create black (#141414) rounded rectangle with radius of 70px and apply Bevel and Emboss and Stroke from Layer Style panel. Give this layer name “display”.

Cmd/Ctrl-click on Vector mask thumbnail to create selection, go to Select > Modify > Expand to expand selection by 3px, then create new layer just below rounded rectangle and fill it with black color. Clear the selection by pressing Cmd/Ctrl + D on keyboard. Name this layer “display background”.

Step 7

Let’s create dvd tray. Draw black rounded rectangle with 10px radius and position it like on the image below.

Cmd/Ctrl-click on Vector mask thumbnail of “display” to create selection around, make sure you are on “dvd tray” layer, inverse selection (Select > Inverse), and then hit Delete on keyboard to delete the top part of rectangle.

Add following layer styles to “dvd tray” layer.

Create selection around “dvd tray” layer (Cmd/Ctrl-click on layer thumbnail), expand selection by 3px (Select > Modify > Expand), create new layer below “dvd tray”, fill with black color and apply Bevel and Emboss.

Choose Custom Shape Tool (U), load Nature Shapes and draw Sun2 shape using #4c4c4c color.

Step 8

It’s time add command button. Grab Ellipse Tool (U), create black circle and add this blending options to the circle.

Draw a white circle in the middle of the prevoius one and add Outer Glow and Color Overlay.

Draw another circle (#242424) in the middle of the prevoius one, but just a bit smaller, and give this layer Gradient Overlay.

With Ellipse Tool (U) create one more circle (#1d1d1d) in the middle and apply Bevel and Emboss and Stoke from Layer Style panel.

Add command name in the middle using Horizontal Type Tool (T), and direction arrows using Polygon Tool (U). For the color use #777777.

Step 9

Using method explained in Step 8 create command button on the right side of the receiver. Create stop, play, pause, forward, rewind and eject commands using Rectangle and Polygon Tool. For the color use #777777.

Step 10

Use the Horizontal Type Tool (T) to add some text and numbers on display. Use a range of type sizes and weight to provide focus to the important elements. For the color use #64efdd. Add an Outer Glow using the same fill color.

Step 11

Open up a new document at 4px by 4px. Zoom into the document and use the Pencil Tool (B) to draw two horizontal lines across the canvas. Go to Edit > Define Pattern and give it a name of LED.

Add an Pattern Overlay to the text and numbers on display.

Step 13

Add more figures on display and apply Outer Glow and Pattern Overlay as described in Step 10 and Step11. The Musical sign can be found in Custom Shape Tool > Music Shapes > Eight Note, while the other signs can be easily created using Rectangle and Ellipse Tool.

Step 14

Cmd/Ctrl-click on “display background” to create selection around it, create new layer on top, drag a white to transparent gradient, from top to bottom, to create a highlight, then change the Blend Mode to Soft Light.

Step 15

In this step we are going to add phones and aux inputs. Draw circle using Ellipse Tool and fill it with #777777 color. Edit Layer Styles to include Inner Shadow, Inner Glow, Bevel and Emboss and set Fill to 0%.

Create another circle using #777777 color and scale into position to sit centrally. Set Fill to 0% and apply following layer styles.

Create one more circle using #353535 and place it centrally. Add input name using Type Tool and apply Drop Shadow. Group these layers into "phones" group.

Duplicate “phones” group, move it a bit to the right and change input name to AUX and group name to “aux”.

Step 16

Let’s move on. It’s time to create USB connector. Grab Rectangle Tool and draw black rectangle. Set Fill to 0% and add layer styles.

Draw another black rectangle, a bit smaller then previous one, lower Fill to 0%, open Layer Styles and apply Drop Shadow, Gradient Overlay and Stroke.

Draw one more black rectangle, again bit smaller then previous one, and apply following layer styles.

Finally create one more black rectangle, set Fill to 0%, double click on layer to open Layer Style and apply Inner Glow, Gradient Overlay and Stroke.

At the end add connector title and signs. Apply Drop Shadow to text and signs.

Step 17

In this step we will create command buttons. With the Ellipse Tool (U) create a grey (#777777) circle, set Fill to 0% and add Inner Shadow, Inner Glow and Bevel and Emboss.

Add another circle, smaller then first one, open Layer Style, apply Inner Shadow, Outer Glow, Inner Glow, Gradient Overlay and Fill to 0%.

It’s time for another circle but this light grey (#e4e4e4), and the add following Layer Styles.

The last circle – set Fill to 0% and apply Outer Glow and Gradient Overlay from Layer Style panel.

Finish this step by adding title to the button. Also apply Drop Shadow.

Step 18

Use method explaind in Step 17 to create input and volume buttons.

Step 19

Add receiver model number using Type Tool and apply Drop Shadow from Layer Style panel.

Open up Powered By Envato API logo (listed in Tutorial Assets) in Photoshop, grab only Envato logo, and import in our design. Scale it down and position like on the image below. Double click on layer to open Layer Style, and give this layer Inner Shadow, Bevel and Emboss and Color Overlay.

Step 20

We’re almost there! Create new layer just above background layer, create an ellipse selection and fill it with black. Go to Filter > Blur > Gaussian Blur and apply blur with a 8px radius.

Create new layer above our shadow layer, then create ellipse selection with Elliptical Marquee Tool (M), around left “foot”, fill it with black, and give this layer Gaussian Blur with 2px radius. Lower the Opacity to 90%.

Duplicate this layer (Cmd/Ctrl + J) and position it below the right “foot”.

Finally apply Gradient Overlay to the background.

Conclusion

That’s it. I hope you learned something new from this tutorial and I also hope you liked it and had fun!

Psdtuts+

http://pippatoledoshop.com/en/home.html

http://theavenuemalta.com/

http://tumasdevelopments.com/

The word metaphor is probably most likened to a piece of writing, when it is used as a literary figure of speech for descriptive effect. However, today, we’re going to talk about a different type of metaphor: a visual one we can use in web design.

metaphor: a figure of speech in which an expression is used to refer to something that it does not literally denote in order to suggest a similarity – WolframAlpha

On the web, we use images and icons a lot to symbolize different things. When we visit a webpage, we scan to try and find what we need as fast as possible, and imagery is used to help speed up that process. We can interpret something much faster with familiar styling and images. For example, we can instantly recognize an error when there’s something like an exclamation mark, or a yellow or red color. It’s all down to familiarity.

Especially in recent times, we’ve started to see urban metaphors appear in web design, using familiar elements like a bookshelf or a wall within a design. However, there are loads of other metaphors that are used in web design to bridge the gap between actual and virtual life.

What is a Metaphor?

The “official” definition of a metaphor has not changed from the previous section: a figure of speech in which an expression is used to refer to something that it does not literally denote in order to suggest a similarity. That’s very truthful when we look at the web and the use of metaphors on that platform. There, we use pixels as representatives of real world objects to bridge some sense of familiarity between virtual and actual life.

There are several different types of metaphors we use on the web too: those on a smaller-scale that mimic real-life objects like buttons, iconic metaphors which copy real life associations and use them on the web, and extended ones where an entire design can revolve around a metaphor.

Real Life on the Web

A button on the web isn’t actually button is it? No, it’s a bunch of pixels made to look like a button because (a) we’ve made it so and (b) our users will recognize it and know that it’s something to be pressed (or, more correctly, clicked). We make this link look like a button because we’re used to recognizing a button as a point of interaction in real life, and will be able to distinguish that particular link from the rest of the page with little effort.

Imitating real life conventions helps us interact with the virtual world. It betters our user experience because the web doesn’t turn out to be some foreign interface that requires a whole lot of learning to interact with. We know buttons are buttons because they look pretty much the same everywhere, they’re a visual cue and users interact with them instinctively.

The same goes for windows, desktops, and tabs in UI design. Steve Krug, in his usability book Don’t Make Me Think famously uses the example of folder tabs as great use of metaphors in interface design.

I haven’t been able to prove it (yet), but I strongly suspect that Leonardo da Vinci invented tab dividers sometime in the late i5th century. As interface devices go, they’re clearly a product of genius. – Steve Krug

Tabs are the classic example of an intuitive interface metaphor.

Icons

Slightly different to identical metaphors are icons, just as we talked about before. For example, exclamation marks are used to represent some state of importance or alert so we use that icon in the same context on the web. Also, we might use the symbol of a phone or a letter to signify contacting.

For a perfect example, we can look at the WordPress dashboard. Each of the menu items down the left side features some sort of metaphor, such as the push-pin to represent posts and the speech bubble for comments.

The encouragement to use such a metaphors is identical to those in the previous section: it creates some familiarity – a “link” if you will – to the real world that helps the reader to interpret and navigate a page with relative ease.

Active Metaphors

We’ve taken a brief tour of replicating real life objects and using icons to form links, but there’s one more important type of metaphor: those that extend beyond a single element. The most striking example I can think of is not a website, but an app. iBooks doesn’t look like a normal iPad app because it’s meant to imitate the look and feel of a real bookcase to add that sense of familiarity for the reader. You look at iBooks and you instantly know it’s got something to do with books. If done well, these types of websites can turn out to be really awesome!

Extended metaphors are less common that the other types which are used on the majority of website designs around the web.

Although “extended metaphor” might be the wrong terminology, this type of metaphor is still the widest type you can get. They offer a little window in your browser into real life, and can be an instant method of creating a first impression of what the website’s all about.

The Monmarthe WordPress theme.

Why Use A Metaphor?

In writing, we use a metaphor to express, explain and describe. Metaphors can be a useful way of connecting an idea with one that it is not literally similar to (where a simile would most likely be used instead), but where the two can be used in conjunction to represent one another.

Metaphors in web design, like writing, are used as a descriptive mechanism by linking real life objects and ideas to the pixels in a website. It may seem very small, and something that can be overlooked, but web readers have a shorter attention span than print readers so time is of the essence when browsing a website. And, in those circumstances, metaphors become helpful by copying real life associations (like the color red with danger, or a magnifying glass with search) and using them on the web so the process of scanning a webpage is sped up.

Attraction

As designers, we can harness metaphors to enhance attraction to the design, and make our designs memorable. We want the users to connect with the website, and, already, most websites have some form of metaphors in use in order to suit their target audience. Websites reflect real-life concepts, companies, people and objects, and the styles chosen don’t different from those in real life. Not only do metaphors create a sense of familiarity between pixels on a webpage and real life matter, but they can also be used to connect to a specific audience.

Let’s take the BBC’s CBeebies homepage for example. The site is built around a background depicting a garden with trees and rainbows, an idealistic picture of the world that is common throughout a lot of child-oriented media. The metaphor of an online garden welcomes children to use the site whereas if it were designed like Microsoft’s homepage, it wouldn’t be so attractive for children to use.

Conclusion

Metaphors are used across all media to express something as something else, and, on websites, they’re a great way of communicating familiarity and attracting readers to a design. When we consider this in the scale of the world’s 4.5 billion years, the web is still a very new medium so creating links between real and virtual is a transitionary measure but one that works.

Metaphors in Action

Flourish

Flourish is a web design agency that takes it’s name seriously. With flourish defined as “grow or develop in a healthy or vigorous way”, the concept of a growing tree in otherwise barren land and an all-around nature-based design is presented.

Interior Design XHTML Template

The “Interior Design” template is a ThemeForest item styled to represent an office, a perfect example of a metaphor in play.

Launch

Launch is another ThemeForest item, but this one likens the release of a website to the launch of a rocket, as do many similar designs.

Mutant Labs

Mutant Labs, a software development company, takes the “lab” part of their name into a scientific context for the sake of their site’s design.

Webdesigntuts+

A lot of web designers start their careers as employees for larger design firms. However, it seems inevitable that most designers will at least consider going out on their own as freelancers, either for side jobs or full time. One major key to any successful freelancing career, though, is to stay on top of your finances.

Below are fifteen things you need to keep in mind when it comes to your freelance business financials. Follow these simple best practices and you’ll be on much more solid financial footing with your freelance web design business. Of course, make sure you speak with an accountant and/or lawyer to make sure you’re doing everything you need to for your local area, especially when it comes to contracts and tax responsibilities.

1. Always Have a Contract

Any time you’re taking on a project for a client, you need to have a contract or agreement in place before you start any work. This is not just to protect you from an unscrupulous client, but also to make sure that you and your client are on the same page in relation to the work that needs to be done.

Your contract doesn’t necessarily need to be filled with legalese and eighteen pages long. Unless you’re dealing with very large amounts of money, a simple document that includes the scope of the work being done, the time frame it’s expected to be completed in, and the payment amounts and when they’re due. For more complex or longer term projects, you may want to have a lawyer draw up a contract, or at least look over the agreement you’ve created.

2. Always Get a Deposit

There’s nothing worse than spending two weeks working on a project only to have a client not pay (or take forever to do so). That’s why you should always get a deposit up front, before you start any work.

The amount of the deposit may vary based on the size and scope of the project. For a small project, it’s not unreasonable to ask for half of the total up front. For larger projects, you might ask for a quarter or more of the total before getting started.

Basically, you want to make the deposit large enough so that if you don’t get paid, or it takes months to get paid, you’ll have enough money up front so that your time wasn’t completely wasted. It also helps weed out the clients who aren’t serious about the work you’re going to perform, as they won’t want to pay anything up front.

3. Carefully Calculate Your Prices

The price you charge for your services can make or break your freelance web design business. Charge too little and you won’t make enough money, or you’ll brand yourself as “cheap”. Charge too much and you may have a hard time getting clients. You have to put some thought into what is a fair price for both you and your clients.

FreelanceSwitch has a great Hourly Rate Calculator you can use as a starting point for setting your rates. If you’d rather charge a per-project fee, you should still start out with an idea of how much you want to make per hour and then figure out the number of hours you expect a certain type of project to take. You can set your fee from there.

4. Use Free Tools When You Can

There are a ton of awesome tools out there that can make you more productive, make your work better, or that you just plain want. And it makes sense to purchase tools that are going to make you a better web designer or a better business person.

But there are also a ton of free tools out there that are sometimes just as good as the paid options. As a freelancer, it’s important to keep your expenses down wherever you can, and using free apps rather than paid ones when you can is a great place to start. Especially when you consider that all those and and subscription fees can add up quickly.

Just be aware that sometimes the paid apps are actually better than the free options. It’s better to spend a month on something that lets you focus more on your paid work and earn more money than to use a free app that doesn’t really help you out.

5. Understand Your Tax Position

Taxes are a reality for every freelancer and small business owner out there. When you work for someone else as an employee, they tend to take care of all of your tax issues for you. But once you’re out on your own, the responsibility lies with you.

Now, it would be impossible for us to cover all of the tax responsibilities you might have in a single blog post. But it is important for you to find out what those responsibilities are. Talk with your local tax department or to an accountant before you start earning money to find out exactly what you need to do to make sure you don’t run into problems during tax time!

6. Outsource Efficiently

Too often as entrepreneurs we try to do absolutely everything ourselves. It’s as if we have something to prove, that we can do it all. But there are times when it’s better to outsource. These times might be related specifically to your client work, or they could be peripheral business activities like collecting past-due accounts or keeping your books up to date. But sometimes it’s better to do things yourself rather than outsourcing.

One simple rule of thumb for figuring out when it’s best to outsource is to figure out how much time it will save you to use a subcontractor and then figure out how much you can earn in the same amount of time. If you can earn a lot more in the time it would take you to do the work you can outsource than what the outsourcing will cost you, it may be a good idea.

Don’t overlook outsourcing in your personal life. Hiring someone to come in and clean once a week can be a great use of your time, and frees your time up for either more work, or more personal time. So look at outsourcing from all angles, and see what will make your business or your personal life run smoother while also being cost-efficient.

7. Track Your Time

Whether you charge by the hour or the project, it’s a good idea to track your time. There are a ton of free time tracking apps out there that make it easy to monitor how much time you’re spending on each of your projects.

Some might ask why it’s necessary to track your time if you aren’t billing by the hour. The reason is that it’s important to keep track of your hourly earnings even if you’re charging by the project. If you think a particular kind of project should only take you twenty hours, but in reality you’re spending forty, you might need to adjust your rates for future projects. The only way to know for sure how much time you’re spending is to track that time, especially if you’re one of those people who multi-tasks or works in bursts rather than for many hours at a time.

8. Use Invoicing Software

Invoicing software has a number of benefits. The first is that most options will keep track of your invoices and payments for you. This makes it a lot easier to manage your cash flow and know when you can expect money to come in.

Better invoicing programs usually include tools for creating proposals, too. This is useful because you can convert those proposals to invoices quickly and easily, speeding up your billing process.

9. Send Invoices Promptly

You should send invoices as soon as work has been approved, or according to the schedule laid out in your contract. Generally, your clients will expect to receive an invoice soon after work is complete, and will be prepared to pay it promptly. If you delay in sending it, they may forget about you and the money may not be readily available when you finally do send the invoice.

So, if you want to get paid on time, make sure you send your invoices to your clients as soon as possible.

10. Make It Easy for Your Clients to Pay

Another key to getting paid promptly is to make sure you make it easy for your clients to pay. By that, I mean it’s a good idea for them to be able to pay by check or credit card, even if it’s just through PayPal. You might even consider offering a discount for payment in your preferred method, regardless of what that method is.

11. Follow Up On Past-Due Invoices

Don’t let your clients slide when it comes to paying their invoices on time. Send them a reminder email when their bill is late. If they still don’t pay, consider offering a payment plan to them.

Many invoicing apps offer the ability to automatically send reminder emails on a schedule for past-due amounts. This can be a great way to streamline the collections process without spending a lot of time on it.

If your client still doesn’t pay, you should consider whether it’s in the scope of your contract to take down their website or otherwise remove work you’ve done for them. This can be complicated depending on how your contract is worded, but it’s something to keep in mind.

12. Keep Careful Track of Income and Expenses

Keeping records of what you earn and what you pay out is vital to financial stability. Make sure you keep track of all of your invoices and receipts for every business-related expense.

These are not only important for tax time, but also for making sure you keep tabs on where your money is going. If you don’t know where you’re spending your money, it’s easy to waste money on things you don’t need.

13. Regularly Review Your Books

This is closely tied to the last point. Whether you do your books yourself or hire a bookkeeper or accountant, it’s important to make sure you keep an eye on your books and where your money is coming from and going to.

14. Keep a Separate Business Bank Account

Keeping your business bank account separate from your personal bank account is important, but not necessarily as important as some financial advisors would have you believe. If your only income comes from your freelancing and you’re a sole proprietor, it becomes less important to keep separate accounts.

Realize, though, that it’s vital for you to keep good records of the expenses that come out of your account, whether it’s a dedicated account or not. A dedicated bank account can make it easier for you to separate your personal and business expenses at the end of the year, though good bookkeeping practices can do the same.

15. Save for Rainy Days

Anyone who’s freelanced for long knows that your income is rarely steady. One month you might work 60 hours a week and bring in twice your normal cash flow, and the next month you might only have two paying projects. These peaks and valleys are a normal part of freelancing, but they can be a huge shock for a new freelancer. It’s all too tempting to take the excesses of one month and spend them, only to find that the next month you come up very short.

Set aside the excess funds you earn in a given month so that when you have a slower month (or even when you want to take some time off) you don’t come up short paying your bills or other necessary expenses. Once you have a few months worth of income saved up, then you might opt to spend some of the excesses you earn some months, but until you’ve got enough to endure the slow periods, it’s not a good idea.

Webdesigntuts+

All over the Web, at any given moment, something is going wrong. It’s not an issue we take lightly, yet it still occurs! No I’m not here to talk about our over dependence upon third party tools or IE6 (specifically), I’m here to talk about site glitches, and how to avoid them.

Occasionally these bugs are small visible glitches, occurring as a result of mismanaged code; or in many other cases, Internet Explorer. Other-times they result from the natural aging process of a site and its ever growing collection of pages. In this article we’re going to explore the world of site-based hiccups and how we can ensure that our sites don’t become associated with the fail whale!

Introduction

In recent years, we have placed a great deal of effort as an industry, following the topics that get lots of attention. Fashionable subjects include responsive design, user-experience, psychology and the buzzword infused languages we use daily like HTML5 and CSS3. Yet while this is going on, one of the fundamental parts of site ownership, the maintenance process, rarely gets much attention. It’s central to usability, it’s critical to design, and without it, sites would be a mess. Yet when it comes to reducing error ratios, many sites (even smaller, easier to maintain ones) fall quite short of the mark.

What is Defensive Design?

Combatting these evil forces, be they bugs or reoccurring errors, is an on-going battle that cannot be won overnight. In much the same way as Ash from the Evil Dead franchise, we endlessly charge into action with our trusty code chainsaws and bug bashing boom-sticks to save the day. The process of cleaning sites and ensuring that they’re as user-friendly as possible is referred to as defensive design.

Essentially, our goal is to support our sites in times of trouble, purge those errors relating to lost files or the unavailability of resources, ensure that our layouts do what they’re supposed to, help the user complete actions, and avoid throwing visitors into a bottleneck of confusion. Defensive design is as much about reducing user confusion as it is about iterating bugs out of the system.

Why does this Matter?

Given that most of the Internet’s users are mortals, unwise to the issues that geek superheroes are able to traverse with ease, we need to take care to help avoid causing them undue stress. Visitors are temperamental creatures that could ditch your site in search of an easier to browse option upon suffering one too many errors. If you can provide a site that loads quickly, works effectively, handles errors (as best as can be expected) and avoids alienating the user with roadblocks, you increase your chances of success. After all, a happy and contented user is more likely to remain a customer!

Legacy of the Lost

If there’s one thing I can’t stand, it’s obtrusiveness online. When things go seriously wrong, it can put you off visiting the site in the first place; or if you frequent the domain regularly, bothering to return later on. In this modern age of 24/7 global Internet access; issues like downtime, missing resources or pushy sites that complain because the user doesn’t have JavaScript enabled or Flash available on their iOS device shouldn’t still be happening. So let’s see how you can reduce these issues.

Server Outages

At some point or another, we’ve all encountered server related mishaps. Whether it’s down to DNS issues, overspending your allotted bandwidth, downtime for maintenance, or a simple malfunction that’s resulted in the Twitter fail whale. It’s the kind of error we cannot afford to ignore because unless we do something, the site becomes unavailable to everyone, s which is quite a scary thought!

Consider the following:

• Backup religiously: This is a simple consideration, but it’s the most critical. File corruption, data loss and more can happen (to you!), and those who don’t backup have the most to lose. You should if nothing else carry out this action on a weekly or monthly basis consistently.
• Offline Access: Even with Internet availability as widespread as it is, we cannot expect our users to have access to our sites 24/7. Ensuring that your pages work if a connection is lost, allowing downloads, and offline access will aid those with terminally unstable connectivity.
• Use a CDN: Content delivery networks are amazing. They cache stuff that needs repeating and they can reduce your bandwidth costs. If you don’t want to suffer an outage because of your host declaring you’ve used all your bandwidth, this can certainly help your sites.
• Status Pages: If you take a site down for maintenance, obviously this should only be done in extreme situations. Whenever a planned or scheduled downtime period occurs, let your users know the score, and provide a status page with timeframes and progress reports.
• Social Updates: Social networks like Facebook and Twitter have become extensions of our own sites. Therefore, if the idea of backup hosting isn’t your thing and you don’t require a 100% uptime safety net), ensure that you keep visitors updated with tweets and comments.

Missing Resources

The dreaded 404 error has become a part of our culture, with pretty much every site suffering one at some stage or another, and every user having met one during their time online. This could include a link to an image that’s disappeared since redesigning, or a page that no longer exists in the archives. Ensure that you seek and destroy these broken beasts and fix regular user invoked errors.

Consider the following:

• Seek and Destroy: Dealing with missing pages or files begins with hunting down the gremlins on a regular basis. You may spot them when you’re clicking through your pages, or you can look to tools like your analytics package or automated error finders like Xenu Link Sleuth.
• Information Architecture: If there’s one-thing designers are guilty of, it’s not maintaining their sites’ archives and allowing old pages to fall into disrepair. If you redesign a site or make any significant updates, ensure that dead links redirect appropriately to their new location.
• Third Party Links: This is one of the primary causes of link rot. If you link to someone else’s site and they choose to redesign (or spring clean), links to pages may evaporate. While we cannot force others to follow our lead, be ready to delete dead links or remap their location.
• User Created Bugs: Love them or hate them, your user dictates their journey around a site. If a visitor tries to access pages that don’t exist by making a typo, errors will occur. Friendly URL’s and redirects can help avoid this, as can monitoring your traffic logs for error trends.
• Friendly 404 Pages: As we all know, the default browser error messages aren’t very friendly. Most people won’t understand what a 404 error is, let alone how to resolve it. By building custom error pages, you can point them in the right direction and offer some useful advice.

Unsupported Technology

While languages like HTML have provided an open, mostly compatible way to ensure that our work functions for everyone, other technologies have not been so lucky. In some cases, the issue is down to the adoption levels of a proprietary system, in others; it’s just down to the fact that the thing we rely upon can be disabled. In all cases, we cannot afford to ignore the problems this can cause.

Consider the following:

• Beware of Flash: While HTML5 is helping to provide a good solution to this issue, Flash isn’t as popular as it used to be. With Adobe cutting development from many handheld devices and iOS having nothing to begin with, gracefully degrading alternative content is required.
• Unobtrusive Scripts: We have become addicted to JavaScript. Beyond the lovely surprise that scripting didn’t have to be used for evil (anti right-click scripts) and the crazy success of jQuery, we now depend on it daily. Just ensure that those without it can browse the site too.
• Image Alternatives: A picture might say 1,000 words, but to the visually impaired or a search engine, it’s going to be about as useful as a chocolate teapot. Ensuring that all your images contain alternative text is essential if you want to be safeguarded against such usage issues.
• Visitor Feedback: Maintaining a site is a tough job, because in the majority of cases, bugs are unintentional after effects that we fail to notice before going live. Encourage your users to let you know if they spot bugs or errors, as they’ll likely spot things you’ll miss entirely.
• Document Formats: Defensive design isn’t just about patching code. Ensuring that your files continue to remain visible in future years is also essential. Always offer multiple formats for your text and multimedia and don’t be afraid to upgrade the selection as you upgrade a site.

Sustainable Layouts

It seems that many Web designers are secretly cheating on their spouses, huddled in front of their computer monitors giving doe eyed looks at responsive Web designs and thinking about how much they’re in pixel love. In this age of design lust, it only makes sense to cover some of the issues we need to defend our visuals against.

Responsive Flexibility

Defensive design isn’t just about the obvious bugs that annoy our users to the point of drawing their computers a nice warm bath. It requires us to think outside of the box and try to avoid the kinds of common complaints, which can break a layout or render a design unusable. There are many general issues relating to the aesthetic of a page, which can be resolved with just a little common sense.

Consider the following:

• Avoid Device Design: We live in an era in which all sorts of tools are being used to access our sites. From tablets to televisions, phones to PDA’s, we need to ensure that our sites work on as many platforms as possible. To reduce issues, make your site responsive, it really helps.
• Suitable Multimedia: Audio and video can bring added layers of depth to your site and help to portray content in a more engaging environment. If you do offer such functionality, be sure to offer transcripts for those lacking the ability to use the media or lacking bandwidth.
• Printer Friendly: It might shock some of you but people still print pages! Yep, for all of those tree burning masses, you’ll want to ensure that you offer a print friendly layout that will trim away all of the stuff that’s useless and non-functional on paper: like adverts and navigation.
• Inconsistent Views: How people experience your site may differ depending on what they’re using to browse the Web. To avoid layouts breaking on devices like phones supporting tilting content in portrait and landscape mode, be sure to use media queries to adjust as necessary.
• Confusing Objects: Underlining text and coloring it blue is never a good idea if that object is not a clickable link. Additionally, hiding a clickable link amongst a bulky mass of text is equal in its ability to confuse users. Ensure that visitors can identify where they need to click next.

Cross-Browser Support

Web browsers have become the bane of many designers’ lives. We spend days putting some code into a beautiful format, only to on occasion spend additional hours, frustratingly pleading with the browser that won’t do as it’s told. If you’re the designer, you might want to say “to hell with it”, but if you’re a user and you follow the same philosophy, that’s one visitor you’ve lost to a visible glitch.

Consider the following:

• Popularity Rules: If a site is going to withstand the test of time, it must ensure that it works amongst the variety of browsers available to users. Always test your site within the most common ones (Chrome, Firefox, Safari, Opera) and the annoying ones (Internet Explorer).
• Unsupported Code: When dealing with languages like SVG that suffer persistently mixed levels of support, ensure that you include relevant alternatives. This may require including another language (like VML for IE6-8), but it’s worth the effort to avoid missing features.
• Web Standards: More of a best practice than anything else, it pays dividends to validate the code you write and separate structure, style and behavior. Not only will it help reduce the likelihood of code glitches occurring, it’ll also help you maintain pages with relative ease.
• Legacy Support: We’ve already mentioned the need to test in popular browsers, but if you use Internet Explorer, you’ll know that each version behaves like a totally different browser. Ensure you maintain a support cycle for old browsers (if there’s enough people using them).
• Broken Scripts: If you use server-side scripting, beware of the error messages that can pop-up on the user’s screen if something glitches in the code. It would be more useful for scripts to email you any error reports generated and provide a friendlier user error notification.

Accessibility Needs

While user-experience design seems to be hogging most of the glory in respect to getting coders and designers alike excited about how to keep the customers happy, accessibility in many cases often gets swept under the rug. It’s a scary statistic that the majority of sites today are still inaccessible and this has to change. Especially as such issues could block an entire demographic from your site.

Consider the following:

• Text Only Situation: Ensuring accessibility credentials requires effort, but a good start is to ensure that everything falls back to a textual alternative that can be read by screen readers. Download the text browser Lynx and see how your site works in an extreme environment.
• Sympathetic Design: One of the reasons why sites tend to fail to help users achieve goals is because the emphasis tends to be upon glossy visuals. As you fortify your site, critique and justify everything on the page, removing or simplifying what fails to do its job smoothly.
• Helpful Alternatives: Accessibility dependent users tend to have a lower margin for error in site defensiveness. If something fails to be accounted for, it can render a critical part of a site totally useless. If you can offer more than one method of achieving a required task, do so!
• Documentation: When things go wrong, visitors will demand answers, they don’t want to feel like they’re alone and helpless. If your site is quite complex or if you’re providing a Web app, ensure that you document every feature and provide useful aids for resolving errors.
• Usability Testing: When you launch a new site or service, the opportunity for bugs to occur is often greater because large parts of the property have not yet been put through their paces. To iron out initial bugs, invite beta testers and undertake regular usability testing by default.

Reducing Input Errors

While the aesthetics of our site are important, it goes without saying that issues relating to form input and page interaction are often the most damaging to the user. We can get away with a site not looking its best in IE6, but if a visitor can’t even utilize a contact form without errors occurring, you may as well turn yourself into the usability police to be arrest without bail. Dealing with input issues may seem scary, but as you’ll now discover, it’s really just about thinking in terms of practicality.

Intelligent Feedback

Computers aren’t very smart, let’s be honest. In terms of Web development, the closest we can get to achieving intelligent feedback is to examine what the user is doing, and try to make a prediction based on how others have used the service. The principle behind this technique is simple: if you can identify where errors commonly occur, you can assist the user by forcing them to take extra care.

Consider the following:

• Auto Completion: As search engines have proven, the power of the people can reduce the potential for spelling mistakes. If you provide a site-based search, help users find what they are looking for by suggesting potential matches and previews for what they’ve typed so far.
• Auto Correction: If you’ve spent much time looking at YouTube or Facebook comments, you probably already fear for the future of the English language. When asking for data, try to fix common typos and be forgiving of the caps lock and spaces in things like credit card entry.
• Error Highlighting: When asking users to enter a specific type of information, accidents will happen from time to time. Whether you use JavaScript or a server-side solution, or both if you want maximum compatibility, be sure to point out exactly where the issue resides!
• User Confirmation: Some things that a visitor undertakes are more important than others. Changing a profile picture for example isn’t as worrisome as paying for something. In cases where errors can’t be afforded, request users check their entries in a post-submission page.
• Alert Messages: The biggest mistakes often occur in an instant, like clicking on the wrong button. If a site has a delete (or other critical) feature that could be disastrous if erroneously activated, always ask the user to confirm the action. Especially if there is no undo button.

On-Page Assistants

While providing users with some feedback during the input process is helpful, it also makes sense to provide additional support to users to help them understand what is required of them before they commence data entry. While intelligent feedback focuses on spotting and resolving errors as and when they occur, assistants try to explain the process better, to avoid it occurring in the first place.

Consider the following:

• Data Shortcuts: In recent years, there has been an upsurge in the number of browsers and products offering auto-completion and helpful aids to ensure that accurate form filling takes place. Ensure that your form inputs have suitable ID’s that these products will recognize.
• Content Hinting: This is a very straightforward route to ensuring users don’t make mistakes. All you need to-do is pre-populate fields with a default value that disappears upon click or data entry, and offer a descriptive explanation of what the field requires (not just a label).
• Link Whitespace: Especially on small screens, mistaken click are quite common. If you’ve got big fingers and try tapping with precision on a tiny object, it makes sense that you may miss the mark. Ensure links have suitable whitespace to avoid accidents (like deletion) occurring.
• Selective Entry: One of the things I admire about drop-down (select) menus and checkboxes is that they limit the potential for mistakes by offering a selection, without the user needing to type a specific value into a box. If you can use these in preference to text entry, do so.
• Digital Signposts: While form filling takes up a big part of the input error spectrum, poor quality links can also make errors more frequent. To avoid sending users to a page (or site) they didn’t intend to reach, label links appropriately and avoid mystery meat navigation.

Delayed Correction

As we’ve stated before, errors happen and no matter how much assistance you give a user, they will always find a way to either ignore your helpful hints or cause a glitch that puts them in a pickle of a situation. As such, in addition to the pre and post data entry process, it’s important that visitors can amend their details, undo mistaken actions and be empowered to “help themselves” when possible.

Consider the following:

• Undo Actions: When we make a mistake like hitting a delete button and ignoring the alert asking us to confirm an action, we immediately feel guilt, shock and fear that we’ve lost the data forever. Offer an undo button to return to a previous state to avoid permanent loss.
• Default Resets: When users are given the ability to configure something, they seem to have a tendency to play with the interface or functionality and learn by trial and error. Due to this admirable browsing trait, you should let defaults be restored from a session or template.
• Post-Production: How many times have you signed up for something, only to find that you made a mistake on the form and now cannot seem to remedy the situation? Rather than just blocking entry fields, allow users to alter (and if needed verify) and rectify issues they spot.
• Back Button: Every browser has one, and we use it regularly. The back button has become the ultimate undo feature for the Web generation. Sites that block this button, except in cases where transactions like payment might reoccur, need to stop and let this tool to-do its job.
• Contact Details: When all else fails and bugs occur, users want to be able to get in touch to report the problem. If you don’t have a contact method (or worse, don’t monitor it), ensure you fix this situation, as it’s usually the final port of call before a visitor abandons your site.

The Neverending Story

If you talk to a software developer, one thing they’ll inevitably tell you is that no product, no matter how simple is ever 100% bug free. The second someone makes that claim, a user somehow manages to break the application, even if it is as simple as “hello world”. Inevitably, you cannot defend your site against the on-going issues of errors in one single swoop. As your site evolves, you will need to keep revisiting and repairing as you work to ensure that what was here today isn’t broke tomorrow!

The truth is, we live in a digital universe that’s infested with link rot, missing content, broken and obsolete code, and the situation only seems to be getting worse. While there isn’t much we can do about the sites that time forgot, you could and should improve the situation for your users. Take the time to spot check your site, look back through those archives, keep cross-browser testing and never take anything for granted, especially as your users will critique you for serious failings.

In terms of customer service, you can be forgiven for having errors in your products as regardless of how hard you try, things can go wrong. But don’t take that as a sign to give up and let the bugs keep coming, as it’s how you deal with them that matters the most. If you work quickly to resolve an issue, visitors will likely feel better about you and your site; as you’re rewarding their feedback with fixes rather than punishing them with continued errors. But if you don’t make your site defensive, you might silently lose visitors, and that’s not something any of us should be willing to settle for.

Webdesigntuts+

Just because you missed that awesome conference, doesn’t mean that you can’t still watch the lectures! This weekend we’re sharing a great talk from MFA Interaction Design. In this talk, Craig Mod, discusses the theory behind what books mean in a digital context and thinks deeper on the design and typography of digital books.

Vectortuts+

http://www.art4web.sk/

We are creative digital agency with focus on Web Design, User Interface Design, Branding and Online Marketing.

http://www.marcusfriberg.com/

Portfolio of Marcus Friberg

http://www.designembraced.com/

Anthony Goodwin – Online Portfolio – Interactive Designer – Design – Interface designer – Multimedia designer

http://hartfordesign.com/

Hartford Design is a Chicago graphic design, digital and branding firm. We work for some of the world’s most admired companies

http://www.prelorenzophotography.co.uk/

Mario and Jean are uniquely qualified to capture your wedding day. Art, design and the visual world has always been a part of their lives from their days studying fine arts at college to now running their own successful design studio. Having worked closely together over the years, they make an effective team, enjoying an unspoken understanding of what constitutes the great visuals that make a memorable photo shoot.

http://tinyverse.co.uk/

If you are looking for a great quality website that will not cost you a fortune (even cheap), the chances are you WILL find it here

http://spacetofu.com/

SpaceTofu is committed to enhance every aspect of your mobile experience. By bringing you this ever growing widget pack we want to refresh your home screen. We want to enable you to make it as beautiful and useful as possible.Since this is the first update, we are keeping the price low for now, so get it while it’s hot!

http://www.samdesigners.com/

Sam designers provide a good web solutions that avails you to standardize your business activities & stay ahead of competetion

http://markdearman.com/

Portfolio site showcasing work by Mark Dearman Digital Designer Art Director based in Bristol (UK)

http://www.terakeet.com/

Terakeet works with companies to build an online presence, increase sales, and drive targeted web site traffic through search engine optimization and social media exposure. As part of this effort, Terakeet employs some of the leading creative minds in the country, capable of inventing unique, new technologies and solutions.

http://www.en.isabelleheureux.com/index.php

Feng Shui is one branch of ancient Chinese spirituality that relates particularly to the impact of places where the human being resides; flats, houses, offices, factories, gardens, shops, …

http://paramore.is/

We’re a full-service interactive agency in Nashville with happy and successful clients all across America.

http://www.twofold.com/

Twofold Creative | Web design and graphic design in Brisbane, Melbourne and Sydney | Web Sites, Graphic, Print and Branding

http://www.aw-digital.com/#

Online portfolio of web designer and developer Antoine Wette. Webdesign & development, Iphone/Ipad webapps

Album covers are always fun projects to work on. In today’s tutorial we will take a look at the step-by-step process of creating a conceptual album cover in Photoshop. Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

• Puzzle
• Texture
• Girl

Preparation

Working with a certain theme is really important when it comes to dealing with clients. No matter who you work for (family, friend, client) or what kind of theme do you get, it always needs a solid execution to look professional. Even when the concept seems simple.

For this project we came up with an “Occupation: Human” concept, as most of the songs tell story about people and their lives. I had many different visions of human feelings trying to hit the best fitting one. Most of those concepts didn’t work out – either I couldn’t find the right photo or it looked pretty bad when I tried to experiment.

Finally I came up with an “in between” conclusion, I found something that wasn’t a feeling, but pointed to being a human. And it was the incompletion of life. That even though everything can be great, we suddenly lack something. Like we miss a piece. A missing puzzle.

When I was 100% convinced of the idea and the right pictures were found, I started the recognition by searching through mass of CDs. It’s always good to get some reference to work with, and I don’t mean coping anyone, as we already have the right concept. What I meant was to take some CD packages and try to compare and imagine how your project could look in reality. And this works really great, by doing that you know how far from perfection you are while creating your piece.

So remember, before you start working, grab a pack of some great CDs and using your own unique concept try to stick to their quality standards.

Step 1

Before we start, it’s good to get the right specification for your CD cover. First image below shows the one I used. The orange line stands for margin that we need to maintain incase there will be some cutting error in printing.

So the first step is to open new document of 3378×3047 pixels (143x129mm), and resolution of 600 pixel/inch. For training purposes you can you the equal size of lower resolution, or just make the document 50% true size.

Now open the image of a girl and place here in the center of canvas. Create a 3mm margin to see if that kind of cut won’t hurt our design. Then just make it invisible.

Step 2

We’re not going to cut the girl from the background, as this isn’t a complex design. So why bother extracting all those hairs. Grab Paint Bucker Tool (G) and pick very dark brown color #0c0807. Then create new layer below the girl and fill it with selected color. Next switch to the girl layer and add layer mask. Paint on it with black color and hard brush to get rid of the background around. Basically we need to blend her with the dark background, so even if you erase too much hair, don’t worry.

When you’re done select the girl layer and go to Image > Adjustments > Shadows/Highlights and follow the settings from 3rd image below.

Step 3

Now this brought us a little bit brighter and more textured result. Also the whites are not as intense as before but still this image lacks a lot. First, we need to get rid of the white and burned spots. From now on we’re going to use only adjustment layers in layers palette. And while creating every single one we will use holding Alt key and select the option “Use Previous Layer to Create Clipping Mask”.

Using this method apply adjustments in order: Selective Color (settings below) > Gradient Map (pick the Violet, Orange preset and use Layer Blending mode of Soft Light with Opacity of 23%) > Hue/Saturation (turn the Saturation slider a little bit down).

Step 4

OK, cool. The face is now not so burned. Now let’s enhance the shading. Create a new adjustment layer Curves (using Clipping Mask as previously). Delete its Layer Mask, then go to Layer > Layer Mask > Hide All. In the Curves box pull the slider a little bit to the bottom right (1st image below). Then using a soft, white brush, paint on layer mask in darker spots to enhance shadows.

Next, look at 3rd image below (the one with circles). Create new layer (use Clipping Mask), grab very soft brush and hold Alt key to sample color from green circle. Then release Alt key to switch to brush and paint where red circles indicate. This will enhance the shadows even more.

Note: to get better results you can change layer’s Blending Mode to Multiply. But be careful, if the wrong color is picked – this may not necessarily get you what you want.

Step 5

Using the previous method, do the same thing, but now take care of the highlights. With the difference that we don’t want to enhance them, we want to get rid of the white tones. So create new layer above (use Clipping Mask), sample color from green circle and paint where the red arrows indicate.

As you can see in the 2nd image below we have covered almost all the whites from her face. If you’re still not satisfied with the result, you can make those spots even more balanced by repeating this process with little bit darker color (3rd image below). It’s easy to overdo that, so be careful.

Step 6

Is this image looking bad now? Yes, someone can say “what the heck? This doesn’t work for me”. But this is the reason I never let any client into my project until it reaches some final points. Several actions will bring this image to a whole new level.

Using the knowledge from previous steps create two new adjustment layers (use Clipping Masks), removed their layer masks and add Layer > Layer Mask > Hide All to both. Pull the sliders as shown below. Then again using very, very soft brush with white color, enhance shadows painting on Curves – Shadows layer mask and then enhance highlights paining on Curves – Highlights layer mask. Second image shows the comparison before/after.

Next go for more adjustments, apply: Brightness/Contrast (settings below) and Gradient Map (settings below).

Step 7

The mass adjustment layering is the result of experimenting. This is necessary when our image has some bad shadows, lights or is just over burned. Now apply Selective Color (settings below), Black & White (settings below), Color Balance (settings below), Hue/Saturation (delete Layer Mask, and apply Layer > Layer Mask > Hide All, use settings below and paint on mask in the highlight face spots).

Note: Each adjustment layer from images below has an adjustment result photo directly below.

Step 8

OK, we’re on the right track. After these adjustments we should be done with corrections. Gradient Map (settings below), Vibrance (CS5 option, you can slightly replace it with proper settings of Hue/Saturation), Black & White (use Soft Light Blending Mode and set the values as shown below, also be careful here, this adjustment layer gives pretty high contrast and increases the black and white depth).

Note: some of these adjustments are repeated, and it’s done with a purpose. They work differently when applied above or below particular adjustments.

Step 9

The final retouched image looks really cool. If you compare it to the raw photo, you will see a huge quality difference. Obviously we could make it more perfect by playing around more and more. But we’re going to add a texture on it so that kind of result is really fine for now.

Open the puzzle image, drag it to our main project document and place it properly. Change the puzzle layer’s Blending Mode to Multiply. This layer needs to be on the top of layers palette (don’t use Clipping Mask here). Then, above this layer create: – Levels (settings below) – Hue/Saturation (settings below) – Selective Color (settings below) and now use Clipping Mask for those 3 adjustment layers.

Step 10

Simple Multiply never works properly; this gives a flat and cheap effect. So we will enhance it using some painting tricks. Duplicate the puzzle layer and place it above all layers (don’t use Clipping Mask here). Go to Layer > Layer Mask > Hide All. Here is the most important thing to do, you need to be very accurate. Grab very soft white brush and paint on Layer Mask revealing puzzle texture (2nd image below). This is important, as you need to slightly reveal the texture of whole puzzle shape using big size brush. Then using very small 2-3px brush enhance the spaces between puzzles. This will bring up the puzzle shape and give more realistic look.

Step 11

Now we will apply a missing puzzle part. You can use any paper texture that you want. Open it and drag on the top of our Layers Palette. Grab Pen Tool and draw a puzzle shape of your own choice, turn it into selection when you’re done. Hit Command/Ctrl + Shift + I to inverse selection and delete the surrounding texture (3rd image below). It’s good to lower opacity of the paper texture for the time of cutting the puzzle (2nd image below), but remember to bring back the 100% visibility of texture when you’re done with extraction.

Step 12

Now stick new Curves adjustment layer to the paper texture using Clipping Mask. Adjust it as shown below. Also delete the layer mask and go for Layer > Layer Mask > Hide All. Then grab soft white brush and paint on the mask to create shadows in indicated spots (2nd image below).

Step 13

Repeat the same process from the previous step and enhance the puzzle inner shadow. Add as much shadow as you find necessary. Next, to make it more real apply another adjustment layer – Hue/Saturation (use Clipping Mask). Desaturte it slightly.

Step 14

Next thing to do is using the same technique (add Curves > apply Layer > Layer Mask > Hide All > use Clipping Mask) adjust it as you see in the 1st image below. Then paint with white on Layer Mask to enhance shadows in puzzle spaces (2nd image below).

Repeat the same process (add Curves > apply Layer > Layer Mask > Hide All >use Clipping Mask), but this time set the slider to the top left (3rd image below). Then paint with white on Layer Mask to enhance the highlights on puzzle edges (4th image below).

You can also enhance these highlights using a new, normal layer and painting on it with bright color.

Step 15

Now we will give some nice realism to the image. Duplicate the puzzle layer, name it “puzzle light” and move it on the top of Layers Palette. Next, follow the images below: 1) Desature it using Command/Ctrl + Shift + U. 2) Add Levels adjustment layer (use Clipping Mask) and darken the puzzles to bring out only the hardest light spots. 3) Check if the result is similar to mine. 4) Apply Filter > Noise > Reduce Noise (settings below). 5) Apply Filter > Blur > Gaussian Blur (settings below).

Step 16

Now change this “puzzle light” layer’s Blending Mode to Screen and lower the Opacity to 80-90%, and you should receive something that looks similar to 1st image below. If you want the effect to be less textured go to Filter > Noise > Reduce Noise, and apply it 2-3 times with previous settings (2nd-3rd images below). Also remember that we don’t want this puzzle light effect applied in place of a missing puzzle. So call the selection of this puzzle shape (Command/Ctrl + click) and hit delete on “puzzle light” layer (4th image below).

Step 17

OK, great. From now on we will only apply adjustment layers to all the layers, there won’t be any clipping masks. We need to affect the whole canvas for final adjusting. So now go to the top of Layers Palette and create Hue/Saturation adjustment layer there (1st image below). Then add Gradient Map adjustment layer and set it as shown below (3rd image), change its Blending Mode to Soft Light and set the Opacity to 60-70%. Next add Black & White adjustment layer (settings in 5th image below), change its Blending Mode to Soft Light and set the Opacity to 30-40%.

Step 18

We’re almost done. Now all these final adjustment are done to give even more realistic look. So let’s touch it up with Color Balance (adjustments in 1st-2nd images below, result in 3rd). Then hit Command/Ctrl + Shift + Alt + E to copy/paste whole canvas to new layer, desturate it using Command/Ctrl + Shift + U, change its Blending Mode to Soft Light, then go to Image > Adjustments > Shadows/Highlights then play around with settings (4th image below). The Soft Light Blending Mode will give you live preview of the effect we’re creating right now. When you’re done, it’s good to lower opacity of this layer (to about 30-50%) as the shadows and lights seem to be too fat in full layer visibility.

Step 19

Everything seems looking really great right now, but there are always some unexpected surprises. As you can see, at the first image below I just brought again my cutting margin. Now when the face was nicely blended in the background you can see that hair part from the left side almost totally disappeared. This image no longer looks like it’s centered. So it’s a great thing that we have this image in resolution of 600px/inch, as this won’t hurt if we slightly make it bigger. To do this hit Command/Ctrl + Shift + Alt + E, this will copy and paste the whole canvas, and then use Command/Ctrl + T to transform and resize. After making it bigger, I dragged this image a little bit to the top left. Now it looks centered and if we turn on our margin for cutting it looks acceptable. So for the final, you can apply the desired title and find the most comfortable place for it.

Step 20

This is the way I created front of this cover. Try to remember to keep rest of the design in the same mood and the same or at least similar color scheme. Also before you send it for printing, it’s good to make sure if the whole design isn’t too dark. It’s always good to copy whole canvas and paste it in new document: 1) Command/Ctrl + A (select whole canvas). 2) Command/Ctrl + Shift + C (copy whole visible canvas). 3) Command/Ctrl + N (create new layer, and at this point pick CMYK as Color Mode). 4) Command/Ctrl + V (paste your design in the new document).

At this point everything depends on your project colors, so it’s kind of personal stuff for adjusting. Anyway to brighten the darkest spots in my cover I just did a slight adjusting of Curves – Black (Alt + 6).

Conclusion

So we have reached the end. Thanks for reading and I hope that you have found the information useful. Good luck with your own creative album covers!

Psdtuts+

Sites like Groupon and LivingSocial have gained some serious traction in recent times with some raising nearly a billion US dollars in a single investment round. The idea around these “daily deals” sites is sharing, with Groupon’s name being a portmanteau of “group coupon”. Most are also localized to specific cities and locals with one offer being available per day.

Today, we’re going to examine how these sites work at the nuts-and-bolts web design level…. and how you can take these tricks and use them in your own projects. Read on all ye web design brethren!

Obviously, these sites are very financially-oriented with retailers wanting to profit from the service. Therefore, sites like Groupon (or it’s contender, LivingSocial) use a handful of design principles to capture a potential customer’s attention and influence them to hit the big buy button and splash the cash on some impulse buy.

How it Works

Groupon has been ridonkulously successful over the past year… but what makes it work? Let’s start with a a 50,000 foot view of the conceptual elements that make up Groupon (and any effective site like it):

• Make it Interesting: Have a product people are interested in. You can do this through literal localization of products (the restaurant down the street from you), or figurative localization (rock climbing products for a rock climbing community).
• Make it a Deal: Everyone loves a deal. Cut the price down so low that it’s hard to walk away from.
• Make it Social: Convince people that sharing the deal is part of what makes it possible. This engages the viewer to share the information.
• Make it a Game: Add a time clock, allow users to gain “points”, level up, compete with others, or other challenges that feel game-like.

Groupon is a ingenious marketing tool that uses the power of social networking (both online and off) to drive customers to a business. Each day, a site like Groupon will feature a single deal in a specific town or city. This “deal” can be anything, but deals involving spas and food/drink frequent the site often.

Groupon uses something it calls “collective buying power” to sell it’s products. Unless a minimum number of deals are sold through Groupon, no-one can buy it. Therefore, each buyer has the motivation to promote the deal in order for them to get it themselves resulting in free marketing for the business and Groupon through social networks and word of mouth.

Effectively, Groupon offers a small (or large) discount in return for a free marketing engine.

Recognizing the Aims of Groupon

Like with any design project, we have to determine what Groupon is out to do in order to understand how it achieves that. Groupon has a simple aim, to get you involved in the deal. On it’s end, it benefits from a commission on the sale but also building a reputation with the business making them want to return.

Groupon, at least in the UK, is not a store and features few deals each day. There’s a main deal specific to your city, but also national and other deals that anyone can get involved in.

It’s a Game!

Groupon feels like a game. A constantly-ticking countdown timer and number of sales are each publicly shown on the page alongside the price. This is important because these are key ways to pressure a sale and the subsequent social marketing. Unlike visiting Amazon or Best Buy’s website where they have no time limit, Groupon makes you pressured into completing a “now or never” transaction.

What’s so fun about pressure? The idea behind all of this is an effect that bargain shoppers and coupon cutters have known for decades: Discovering a deal and being forced to act on it actually triggers pleasurable sensations in the brain. It actually feels fun when you successfully find a deal and buy it within the time limit… or in other words, you’re happy that you gave them your money!

Additionally, the number of sales is shown alongside the product allowing user’s to constantly monitor the deal’s success. If the number stalls, it, again, pressures a user into influencing other users to buy.

Living Social also has a second motivator to get people to share the deals with their friends. If you share the deal and three friends buy it, you get the deal for free! Therefore, offering better visual prominence to these key stats can influence users to buy with haste.

Simple Store

Amazon and Groupon both have a financial interest in their website’s success. However, whilst Amazon generally divides it’s attention between it’s catalog of products, Groupon focuses on just one or two.

Groupon’s emphasis on a single product that’s advertisement takes up most of the page results in more traffic being drived to a single product. Then, impulse buying kicks in, especially with the ticking clock limiting the deal’s availability.

Visual Direction

Visual Direction is the concept relating to the eye’s natural perception of a web page. There’s several, probably unintended, principles in play across Groupon’s site. For example, the various photographs used to advertise each deal, sometimes involve people. These people generally look to the left leading the eye towards the large buy button.

In the case of Groupon, streams of “light” (for lack of a better term) direct the user’s attention to the main deal. Again, it’s all an attempt to focus the user’s attention on the primary deal and close them into an environment where they’re more likely to buy.

Hierarchy in Play

We’ve all heard of visual hierarchy. It’s one of the core web design principles that form a user’s impression of a web page and can influence their travels in it. Of course Groupon, and sites like them, play on nature but in an alternative way.

On Groupon’s side, the biggest and brightest elements on the page are the title and the buy button. Unlike buttons on normal online retailers, this one is big and when it’s combined with the rush of the countdown clock, it seems like the way to beat the hypothetical game in play.

Little attention is focused on the other aspects of Groupon’s design. Effectively, the site is one big advertisement that’s been further marketed by those wanting to “win” the game.

What Any Web Designer Can Learn From Sites Like Groupon

This all might sound great for a mega-site that drives millions of hits a day… but what can other web designers take away from these high-concept ideas that Groupon is employing to empty our wallets and beat us back into poverty?

Lesson 01: Any Site Can Be Improved With Game Mechanics

You’re welcome to argue with this one, but listen closely. I’m not saying that we should turn Wikipedia into another Giant Game of Pacman site… but by employing mechanics such as “contributor points“, “earned badges“, and even “easter eggs” helps to activate visitors of a website, rather than just dismissing them as passers-by.

Consider the BMW USA website for example (or any modern car site for that matter): Most of these sites allow users to enter a custom “build your own car” page. Is this functional? Sure, it helps sell cars… but more importantly, it allows potential customers to play around on your site. It’s fun to try building the car of your dreams and see how expensive (or cheap) you can configure it to be.

Take that same idea and apply it to shoes:

You get the idea – by allowing users to “play” with your site, you engage them… which brings us to lesson 2:

Lesson 02: Engage Users

In grade school, everyone hated the boring cardboard tri-fold presentations that kids would give on some boring old subject like consumption or the human arterial system… why? Because it’s not engaging. Engaging users isn’t hard… and it can be done at the design level. Here are just a few ideas:

• Make buttons look pressable
• Use UI elements that feel usable, even touchable
• Allow users to change their experience of the site (font size changes, personalized themes, etc.)
• Ask users to comment, respond, or share something they find (this doesn’t need to be corny or desperate)
• Incorporate interactive elements like jQuery sliders, configurable layouts, and accordions

Lesson 03: Speak Like a Human

One thing that I’ve always loved about Groupon is the way that they write copy (aka, the boring paragraphs of text that most designers never expect people to ever read). Take their “Feelings Board” for instance:

You obviously don’t need to create something as silly and inane as that, but when writing copy (or reviewing it with your client), remember that real people actually read this stuff. Keep the tone applicable to the target audience of your site though: for instance, you probably wouldn’t use slang or puns when working on a site for Ferrari. Surprise a reader with an especially acute understanding of the culture, technology, or any other topic that they might be interested in and you’ll find that they are more likely to return.

Influencing Clones

The market for location-based deals is a relatively untapped one so Groupon’s success has influenced a new breed of websites that share Groupon’s functionality. Some are location-based also, but others are specific to certain markets like fashion.

Whiskey Militia

Whiskey Militia focuses on fashion and it’s daily deal reflect this market. They use the statistical approach to rush the sale but also show other analytic data like the number of people on page to offer more motivation for potential customers to cross the line and splash the cash.

Wine.Woot

Wine.Woot doesn’t offer much emphasis on statistics, but they do use the same title/image and button prominence to induce sales.

Mighty Deals

Mighty Deals is a Groupon-style site that’s aimed at creative professionals. The aim of the site is, once again, focused on a single deal with emphasis on the countdown.

Final Thoughts

Groupon has an interesting web design that forms a big advertisement. This ad is possibly one of the most powerful in the world since it succeeds on the free marketing of it’s own customers. Whether some of it’s design elements were direct or not, they play powerful roles in rushing a sale through. It’s true that these elements, especially the game-like statistics, have influenced a new breed of businesses.

^{This article was originally conceived by Brandon Jones, then written and researched extensively by Connor Turnbull, and finally re-written and edited with Brandon.}

Webdesigntuts+