Category Archives: Tips & Tricks

Why designers need SEO

You may be a great graphic designer and you may be able to come up with breathtaking designs in a few hours and draw illustrations from scratch, but do you have the means to sell your skills online? Can you market your designs and acquire new customers every single day? Do you have the means to expand your business so that you can reach potential international clients? Do you know how to use SEO to help people find your business on search engines?

You may be the only person holding yourself back. For all you know, you might already have been able to make it big in the design industry, if only you had known how to use SEO when you started out. Yes, even graphic designers need to learn SEO. The sooner you accept this, the faster your business will grow.

What is SEO?

If you’re still reading this, you have probably decided that you wanted to learn SEO. I know that this term may be unfamiliar to many of you, which is why I included the following explanation.

SEO stands for “search engine optimisation.” Simply speaking, it is a process that helps you optimize your website and links, so that search engine robots believe your site is about a particular keyword.

This process came about due to the fact that most people use Google and other search engines to discover new websites. When searching for something, you key in a particular keyword in the search bar. The process of getting your website to appear on the front page of search engine listings became known as search engine optimization.

I know that some of you may be thinking SEO sounds a little complicated. That’s okay. After all, I’m still trying to explain why you even need it.

So, why do you need SEO (even as a designer)?

You can get repeat clients from the quality of your designs alone, but you can get new clients using SEO.

First of all, I’ll state the most obvious, you can create amazing designs, which may win you some referrals and some repeat clients, but you have to realize that a lot of new clients come from SEO. Why? You need to be ranked highly on search engines if you want to have an online presence. It isn’t good enough to have wonderful designs if nobody can find you.

If you think that SEO is way too technical or not your cup of tea, you can always outsource the process. It is a worthwhile investment, as it can get you more clients. But if you have the time, try your best to learn SEO yourself, as it will pay off more in the long run.

You cannot do SEO friendly designs if you don’t know anything about SEO

Let’s face it. Webmasters no longer require mere designs. Usually, they need a designer who also understands how SEO works. Why is this the case? Well, they are hiring designers to help boost their business, so they want a designer who won’t hurt their rankings. Sure, they need your design, but you need to convince them that it can easily bring in sales. Forgetting to use SEO in the design process is a detriment to your business.

Now, if you’re more of a designer and you don’t have the time or patience to learn SEO, you can always work with a SEO company or team to help make your designs search engine friendly before submitting them to your clients. This extra feature will require extra money, but it’s definitely a feature worth paying for.

It is best not to put all your eggs in one basket

You may be a master of design, but, as every business owner knows, you should never let your business revolve around only one type of service. If you can learn SEO, link building, and even computer programming, then you should absolutely do so. Always diversify your services so that you can make more sales.

Now if your design team has too much on their plate, you can always work with an independent SEO team. The good thing about this is that you’ll be working with people who already know SEO. You no longer need to train them. You just need to create a deal and you’ll be ready to attract some clients.

It’s time to end your solitary love affair with Adobe Photoshop and Adobe Illustrator, and spend some time with Google, Yahoo, and Bing. It is just a matter of learning basic SEO.

If you chose to outsource your SEO needs, make sure to use a trusted SEO provider that has been in the business for a long time and knows what they are doing. This way, you’ll know that your design firm is in good hands.

Form Design: Best Practices

Gradients. Don’t you just love their multi-coloured wowness. And drop shadows – where would we be without them? And forms… yeeaaaaah! Wait, they’re a bit boring, aren’t they?

Whilst designers (sorry, I don’t want to paint everyone with the same brush!) have been doing their darndest to create fancy feature panels, bold backgrounds and tricky transitions; there’s the runt of the litter that seems to always be neglected. The after-thought.

We all hate filling out forms on web pages but they are a necessary evil – conveying information from one party to another for a specific purpose. Therefore, why shouldn’t this part of a web page be given the same treatment, the same amount of time and resources, as any other? Unfortunately, it does seem to be the case that forms are often chucked together (I’m guilty of it too!) with minimal thought but a form is often the best way of communicating with your audience so that makes them pretty important right?

In this article I’m going to share a few tips that may make your web forms easier for your visitors to use. Fortunately many modern website templates come with already built and fantastic forms!

1. Top-aligned labels

One of the biggest factors contributing towards ‘web form frustration’ is that the user is actually forced to THINK about what they are doing rather than just absorbing information. Looking at something on a web page usually ellicits a response – ‘that looks pretty’, ‘this product looks interesting’, ‘I wonder what this does’ – and the user then CHOOSES an appropriate action – ‘I’m going to click/touch this’, ‘I’m not going to click/touch this’. This is generally a smooth experience that the user feels comfortable with and they continue to browse on their merry way.

With web forms, the user doesn’t have an option other than to fill in the fields laid out in front of them. Therefore, they have to look at something, absorb the information, process what the information is telling them and then figure out for themselves what to do. Obviously, over the years, forms have developed certain conventions which everyone is aware of but that doesn’t mean that there aren’t improvements and efficiencies to be made. One particular step at which these improvements can be made is during the ‘processing’ stage. The clearer and easier you make it for the user to determine what they need to do next, the better the form experience and the less ‘web form frustration’ is felt.

Here we can apply some basic human and typographical conventions. Look around you. Whether it’s a book, road sign, billboard or other assortment of text, it is always easier and quicker to read something ‘long and thin’ than something ‘short and fat’ – where more words are stacked on top of each other than written side-by-side. This is why newspapers have columns – humans are lazy and it is easier to read a little bit across and start a new line than it is to read a big long line before moving to the next one. This same logic can be applied to form elements.

A top-aligned label is easier for the user to process and recognise the associated input field. The focus of the eye naturally starts on the left and the user immediately groups the label and input together before reading and processing what the label actually says. Moving onto the next label and input group is also easier as the user just moves their gaze downwards rather than ‘returning’ from the previous line.

Compare that with a layout where the label is aligned to the left (or even right) of the input field and the user has the extra step of recognising where the associated input is, as they haven’t spotted it yet, as well as encountering the ‘returning’ issue when they move on.

Try filling out a form with top-aligned labels and one with left-aligned labels – the top-aligned form just seems to flow better.

Top-aligned labels are also a lot better suited to handheld devices. With limited horizontal screen space, top-aligned labels are an absolute must when using forms on a mobile device as making your users scroll horizonatally is a cardinal sin.

One slight cost of having top-aligned labels is that the length of the web page will, inevitably, be longer than if using left-aligned labels. However, as we’ve discussed, the user will find ‘long and thin’ easier to process anyway so this is a sacrifice worth making.

2. Use the same form for the password reminder

The thing that maxes out ‘web page frustration’ is not having the information required to complete an input. One such case is forgetting your password. We’ve all done it and sometimes it’s a very laborious process trying to recover it.

Commonly, the password reminder process is triggered by clicking a link near to the password box. This is simple enough and works well. Often, however, this link will take you, the user, to a different page entirely where you have to process some more information before finally getting to the point where you get your password back. Sometimes a modal window is used, which is a better solution than sending the user off to another page, but it is still fairly intrusive. Why not switch a few things around, show a message and use the same form? The following example shows how the ‘forgot password?’ link fires a transition from the login form to the reminder form. It’s clear that this is a different form but it’s taken a tenth of the time it would (and looks a lot nicer!) than sending a user off to a different page.

Checkout this awesome password reminder example…

The wonderful Codrops have also produced a good example of this technique.

3. ‘Review and check’ email address inputs

One of the things I find most baffling about web forms is that the user is asked to repeat information they have already entered. There are two very common examples of this – email address and password fields. Firstly, the email address input. How many of you just copy and paste what you typed in the first box into the second box? Come on, hands up. Everyone does it including the person who built the form so what is the purpose of typing the same information twice? The answer is to ensure that the email address entered was indeed correct as this is obviously the best (and often only) way of communicating with the user. This is perfectly understandable and a hugely important check to make but why does the user have to repeat what they’ve already written? Why not ask them to review what they wrote previously and confirm it is correct?

This review can very easily be carried out with the use of a checkbox. The user checks the box next to the email address input to confirm they have written their email address correctly. Review and check.

Now, the user could, in theory, just check the box without reviewing what they wrote in the email address field and this could lead to mistakes. But with the duplicate field method, if the user is just copying and pasting anyway then these mistakes will still happen. It’s often argued that you should imagine your mother is using your web page (why is it always mums who are crap at using computers?!) and she should be able to understand and use it but why should all users be treated as the lowest common demoninator? The email field is probably the most important one on the form and the user knows it – it’s been hammered into them through years of repeatedly having to copy it to a second box! – so they WILL take care. The likely result of using the ‘review and check’ method is that there will be the same amount of mistakes made but the experience for the majority of users will be a lot smoother and less painful.

This leads us on nicely to the other repeat offender – the password field.

4. ‘Show password’ button

The password field is a slightly different but equally frustrating case. The user cannot copy and paste their entry from the first box to the second so the ‘auto-pilot’ mistakes won’t happen but, unlike the email address field, the user cannot actually see what they’ve typed. Therefore, if a failure happens there is no choice open to the user but to completely start over and fill out BOTH boxes again. So by typing one character incorrectly, the user has to fill out, essentially, the same input field FOUR times! Madness.

Now, obviously, the password field has certain security considerations surrounding it so, whilst it isn’t quite as simple as having a checkbox for the user to tick, a similar solution can be implemented to streamline the user experience.

Through the use of a nifty jQuery plugin*, we can insert a hidden duplicate input field with an accompanying button or checkbox which, when clicked, will ‘swap’ the password input for a regular input showing the password text (it hides one and shows the other depending on the state of the button). This means that the user can check their password and make sure it is correct before they submit the form.

There are a couple of obvious pitfalls with this method however meaning some refining is needed. Showing your password on screen isn’t advisable but how often do you type in important passwords with someone looking over your shoulder? This is a minor issue but a much larger one is using this method on a sign-up form. If the user types in their password, doesn’t check it and then submits the form, there is no reason why the information wouldn’t be correct but if it is incorrect then there is no recourse for the user and this would obviously lead to problems. Potentially, you could force the user to click the check button at least once but then this method becomes as equally intrusive and confusing for the user as the duplicate input method.

Another solution is to add a checkbox to accompany the form which acts as a confirmation much like the ‘review and check’ email address method discussed above.

NB. jQuery plugins

5. Have the newsletter sign-up checkbox unticked by default

For me, this is an act of common courtesy. If a user WANTS to hear about your company’s latest and greatest product then they will tick that little box themselves. Or they might visit your Twitter or Facebook page. Spamming with weekly, monthly or in some cases daily(!) emails telling people information they don’t really want to know does not endear you to them – it downright pisses them off. People don’t like to feel as though they have been tricked but that is exactly what pre-ticked newsletter sign-ups do. Why do you want to send an email – which will cost your company money! – to someone who most probably doesn’t want to hear what you have got to say?

Advertise your newsletter on the sign-up screen. Make it loud and proud and maybe say what is regularly included – that way you are genuinely inticing users into hearing your message and they will appreciate it rather than feeling duped.

It’s amazing how a small gesture like this is appreciated and casts you in a more human light to a user. That is infinitely more successful in promoting your product than a spam newsletter can be.

6. Make use of HTML5 input properties today!

To round up, I’m going to get a little more technical on y’all.

HTML5. Many people shy away when that initialisation is muttered, usually for one of two reasons; either they are scared of having to learn the ‘new’ markup or they know browser support isn’t universal just yet so they don’t bother.

But many HTML5 features CAN be used today quite safely and one area in which this is most relevant is with form elements. Several new input types and input attributes have been introduced into the HTML5 spec. They include the datepicker input, colour picker input, required attribute and a few others and in many modern browsers these will work out-of-the-box. Unfortunately, their styling is native so it could be very detrimental to your UI should the browser chuck in a validation message or two. And on browsers that don’t support them it provides a really bad and potentially unusable experience for the user.

However, some inputs and attributes can be used in the knowledge that they will be safely implemented across all browsers.

Email, URL and number input types

One trick tip regarding forms is that, if a browser doesn’t support the input type you have specified then it will revert to a standard text box input. For inputs such as a colour picker, this is not an acceptable solution but for fields like email address and URL, this is a perfectly acceptable example of graceful degradation.

For mobile users, where the keyboard layout can be particularly important in helping the user, these inputs are of particular importance and should be used generously.

Placeholder and autofocus input attributes

Two HTML5 attributes of a particularly subtle nature are placeholder and autofocus. Placeholder puts your specified text into the input box until the user focuses on the input, at which point the text disappears to leave the user free to fill in the input. For years, we’ve been hacking this solution into our forms and now it’s in the spec by default – magic! You can even use CSS to style the text in some browsers by using the custom attribute selectors ::-webkit-input-placeholder and :-moz-placeholder{color: red;} (yes, the colons are correct).

The autofocus attribute simply places the cursor into the input field on page load enabling the user to start typing straight away – typically this would be the first input in your form. For obvious usability reasons, autofocus is not supported by mobile browsers.

So there you have it, six tips to improving your website forms. These techniques can be used in nearly all situations, in all browsers with no regard as to whether CSS and/or JS is turned on so why not give them a go!

5 reasons cloud computing is here to stay

Cloud computing has been growing in popularity for the last few years as companies realize it’s more efficient than a traditional IT infrastructure. The cloud facilitates data security, mobile accessibility and business continuity. But what’s next for cloud computing and what should you look for in a cloud company in 2012?

Cloud Computing

Faster Disaster Recovery

In the past companies have had to use off-site data back-up to recover from disasters. With a cloud system, companies will be back up and running in a matter of hours after a disaster strikes, as all their data is already stored and accessed off-site.

More Cloud Based Applications

As bandwidth becomes less expensive and cloud computing more widespread, a greater range of cloud applications will become available. As the market grows, more and more specialised software will become accessible via the cloud, helping reduce software costs for cloud-based companies.

Better Storage Optimization

Since cloud services are often billed by the amount of data storage required, better data compression techniques mean cheaper cloud services. More efficient data size reduction techniques promise to help squeeze your company’s data into the smallest space possible.

Cloud-based analytics

Many companies rely on analytics to build occasional reports, but only use it part of the year. Cloud companies could start offering analytics data on a report-by-report basis, instead of charging a month by month fee. Companies who leave their analytics idle for long stretches could realize huge savings by paying on a use by use basis.

Shrinking On-Site IT departments

On-site IT departments will shrink as IT support becomes more centralized inside the cloud. Fewer locally run applications means fewer IT personnel are needed to support their use. On-site IT support staff will be limited to hardware and network infrastructure support.

Whatever your companies IT requirements, there is a cloud-based solution to make your IT infrastructure cheaper and more efficient to run. 2012 looks like it will be the strongest year for cloud computing yet.

Designing for the Apple iPhone: Six top tips

Designing for the iPhone can be a challenging task, whether it’s your first attempt or your hundredth (iPhone user interface design can be challenging even for those who have studied it and have a brilliant design degree!). Most iOS user interface designers were web designers before exploring the ever-expanding mobile market, and although the elements may be similar, the resolution and screen size most certainly are not. The designer needs to be able to fit just as much (or sometimes even more) information into a much smaller area, in the iPhone’s case that’s 640 by 480 pixels – keep in mind however you’ll need to design at a resolution of 960 by 640 for the iPhone 4′s Retina display.

In this article we’re going to be looking at six tips which will help you design your iPhone app UI’s in a better and far more efficient way. Let’s get started…

iPhone UI Tips

Are you a young designer looking for a graduate design job? Get awesome advice from juniordesignjobs.com; find out more!

#1: Wireframe, wireframe, wireframe!

I honestly can’t stress enough how important this one is. Do not, I repeat, do not attempt to design an iPhone application without wireframing first. Even if you have a really clear image in your head about what you want your app to achieve and what you want it to look like, you still need to spend some time wireframing, even if it is a short 10 minutes for a very small iOS app.

Opening up a blank canvas and starting from an image you’ve only seen in your head is very tricky, and you’re bound to run into user experience problems if you rush into things. Scribbling your ideas down onto paper will allow the errors to jump out at you; that button is out of place, that image won’t fit there, this needs to be on a different screen, that screen doesn’t need a back button… the list goes on. Designing your applications user interface is also a great deal easier if you have wireframes to refer back to throughout the process.

#2: Use LiveView Screencaster

To be totally honest I haven’t a clue how I coped before finding this incredibly helpful Mac/iPhone/iPad application created by Nicholas Zambetti. The concept is simple: your iPhone (or iPad) replicates what is on your screen.

The set-up is extremely simple; download LiveView on your iPhone or iPad, and LiveView Screencaster on your Mac. Once you have downloaded these you simply run LiveView Screencaster and an iPhone or iPad frame will appear on your screen, just position this screen over your canvas in Photoshop (or your design software of choice). You then simply open up LiveView on your iPhone or iPad and select your Mac’s name to replicate your screens.

This allows you to repeatedly check how your design looks on your iPhone without having to export images and send them to your iPhone. Before using this application I was saving maybe 5-10 images from Photoshop per day, and then sending them to my iPhone via Dropbox. After a quick calculation, I estimate that I was spending up to 20 minutes per day waiting for files to save and transfer. This app allows me to spend that 20 minutes per day designing, that’s 100 minutes per week and 5200 minutes per year, which is a whopping 86 hours and 36 minutes that I save per year from using this application alone, equivalent to £2,150 wages!

I almost forgot; LiveView is a completely free application. There are absolutely no charges, which surprises me as me and many others I know would happily pay a few bucks for this!

#3: Make use of Vector images

Once upon a time this was never really all that important when designing for iOS devices, but now we have different resolutions to think about (iPhone [All Models] vs iPhone 4) it is very important you use scaleable vector images as often as you can. It isn’t essential, but if you don’t have lots and lots of time to completely redesign an app at a different resolution, it’s important, not to mention much easier!

I’m not saying use a vector-based application like Illustrator here, I’m just stating that you should use vector-based elements. In Photoshop for example, make use of Shape Layers (which are vector, by the way)! Shrinking a rasterised element can cause blurry edges, where as upscaling a rasterised element will just create a pixelated mess. Now replace the word rasterised with vector, and we avoid all of those outcomes. Make it smaller and it will stay perfectly crisp, make it larger and, again, it will stay perfectly crisp.

Sticking to this rule will save you a lot of time in the long-run, and will also produce much higher quality results, which is ever-so important with the mass of upcoming iPhone designers if you want to either stay at the top of or climb the ladder to become the top of the iOS design market.

#4: Snap to Pixels!

Here’s another important Photoshop tip, which won’t necessarily save you time, but will make your designs much sharper and, well, sexy! The most common use of snap to pixels is when using shape layers. It allows your shapes to be the same on each edge. This is a tricky one to explain, but the screenshots below clearly demonstrate what it is I’m blabbing on about.

It’s a super simple tip, and once you’ve ticked that “Snap to Pixels” box (which is hidden away in the menus) you’ll never have to do it again, so it is highly recommended if you don’t already use this hidden gem of a feature! To turn the feature on, simply click on the arrow next to your shapes in the shape layer tool bar, and check the box! Simples!

#5: Familiarity is key!

There is nothing wrong with thinking outside the box and creating something stunning that doesn’t resemble Apple’s default UIKit – but sometimes there is simply no need to. For simple and large applications alike having a familiar interface isn’t a bad thing – there is nothing wrong with using elements from the default UIKit and grooving them up a little with new colours and applying a texture here and there.

The main reason for keeping your application familiar is that the user immediately feels comfortable with it. Although the user has never used the application before, they know what this button and that toggle does, even if they are sporting a different colour. Other actions that are good to stay the same are swipes (i.e. swiping through images or swiping on table views to reveal delete buttons) and pinches (to zoom in and out). This creates a brilliant user experience, and is definitely recommended – although there is nothing wrong with going all out and creating something brand new, just make sure its buttons and actions are instantly recognizable!

#6: Get good feedback!

It’s important to get good feedback on your work, an opinion from someone who isn’t directly involved in the project you are working on. Make sure you are allowed to share your work though, as some contracts may state you’re not allowed to show the general public the work until it has been approved and/or released. I recommend using Dribbble, an incredible community which focuses on interface and graphic design. I also find myself using Twitter a lot, posting TwitPics of my designs to get direct feedback. Sometimes I have what I like to Twitter design sessions, posting 10 minute progress updates (with screenshots) of the design I am working on. This is a great way to get people involved in my work, receive constant feedback and also improve your social networking skills!

Five virtues of user interface design

UI design is by no means easy, but it is incredibly fun. You get to use your imagination to create new or improve upon pre-existing site and app user interfaces. However, being a UI designer does come with a few governing virtues that all designers should follow to produce great interfaces. The 5 virtues that all UI designers should live by include:

Priority

You are not designing a site to look flashy and show off your mad skills; you are designing a site to enhance the lives of your users. For each design you create you must always keep your users in mind. Not everyone is a developer, and forgetting about your audience can cause you to create a site or application that is beyond their reach.

Familiarity

There is a reason why most sites and apps follow a specific pattern – it is because it is what users are used to. Creating a completely new site design with common features in new areas will only confuse your users and deter them from coming back to your site. Unfortunately, people like to stick to their usual patterns. If you change it up too much on them, they will find it jarring and uncomfortable.

Simplicity

When you walk onto a StorageMart site, there is nothing fancy about it. It offers nice, clean storage units that are easy to use and self-explanatory. Your UI designs should be the same way. The more things you add to a site or app, the more difficult it becomes to use or follow. In design, simple and straightforward is always better.

Empowerment

Your site or application should always empower your user. Never dumb something down so much that your user feels as though they are being mocked. You want them to be able to use your design in a way that will enhance their lives, without feeling dumb for having to use it. Make sure you create a site or application that reinforces that.

Vernacular

Ver-what? Exactly. If you want to provide a design that is understandable and easy to use, then you need to use language that is conversational and easy to follow. Just because you have a great vocabulary doesn’t mean you need to use huge words all the time. Use words that are common to the way your audience speaks.