We all know that change is the only thing which is constant. Even if there are certain rules and regulations for designers, they too have changed with the passage of time. However, when it comes to usability principles, a few principles can be modified but cannot be changed. The reason behind these principles staying the same is because they have been adopted by human nature and they need to be kept in the same way for proper usage. If you want to change them, basics will always stay the same. As with any project from designing layouts for calendar printing to designing an online store, you should follow a protocol to make sure all important elements are included.
Let us take a look at few timeless usability principles for website designers:
As a designer, you are obviously spending a lot of time designing for others and when clients come to you, they have a certain kind of people in mind that they would like to target to. Therefore, you need to design the website keeping the target audience and their preferences in mind. Also, you will have to keep in mind if you have to design an e-commerce website where visitors can buy the product or if you have to simply design a website which provides information. It is also possible that your clients might want to target more than one kind and as a designer it is your responsibility to make a design targeting the right kind of audience.
So, the first principle is to keep the target audience in your mind. While keeping the target audience in your mind, you need to accomplish the objectives of your website. The objective of you website could simply be attracting more users to sign up for the website or buy products or interact. For instance, your website offer design services of marketing collateral like flyers, brochures, postcards, business cards, posters, booklets, rack cards andcalendars etc, then it should speak for its services in terms of design and usability.
Each and every step on the website should be well planned. If you want visitors to sign up for your website, give them half of the information they are looking for and rest of the information should be provided once they sign up. Always give them a good benefit of signing up.
Well, when a user visits a website, he obviously has a few questions in mind and he would like to have answers to those questions. You have failed as a designer if you are unable to answer a few basic questions of a visitor.
Whenever someone’s visit your website, he should be able to judge what your website is all about in the first glance because the most basic question that pops up in to a user’s mind is ‘Where am I’. Now, the name of website should be visible and clear enough. There should always be an ‘About Us’ tab highlighted on the main page of your website for user to get basic information about your products. Also, whenever a visitor visits other pages of your website, you need to highlight those tans so that he knows where he will land up if he clicks on the same tab again.
The second question that will pop up into user’s mind would be ‘what is his purpose’ behind visiting the website off course and will the website serve the purpose. Now, this depends on the objective of the website because if you have an e-commerce website, make it prominent that this website is for buying products. If it is not an e-commerce website and simply an informative website about your product, it should be designed in the same manner.
The third question would obviously be ‘Why should I read or buy from this website’. As a designer, your design will make the visitor stay on the website. Now convincing a visitor to buy stuff or read online, your writer has to work really hard. Your job is to provide a perfect design and space to the writer so he is capable of conveying information in a proper way.
There is a lot of difference in reading on a paper and reading online. When a user is reading online, he would like to get more information in a short span of time and would not really want to think. When it comes to online reading there is more of scanning and less of thinking. As a designer, it is your responsibility to design the page in a way so that it gets feasible for readers to scan and find the most important part.
Also, if you really want to build a user base, you need to make them think less and for this the designing and navigation of your website should be simple and easy yet stylish. The best way to do this is to put yourself in visitor’s shoe and if you find something complicated, obviously your visitor will find it to be complex too hence leaving your website. While designing you need to think from visitor’s perspective so that they can think less.
The text used on the website is also very important. Your writer might have an amazing vocabulary but your visitors might not so he needs to use layman language. Instead of using difficult words, he needs to keep things simple for users to be able to understand each and every tab. A simple example would be, you can use ‘Who We Are’ instead of using ‘About Me’ or ‘Contact Us’ would be better instead of using ‘Customer Care’. So the key is to keep things simple and understandable.
You need to think from your visitor’s perspective but for that, you need to know and understand your visitor really well. Only then you will be able to put yourself in his shoes and think accordingly. What you need to do is find the common traits of the people who visit your website and then try to think from those people’s point of view. Always keep in mind that you will not be able to satisfy everyone. If you have managed to satisfy 80-85% of your customer base, you have managed to come up with a successful website.
Even as a designer, you need to think technically at times so that you can grab the attention of right kind of clients and visitors. If you are designing an e-commerce website, your goal should be bringing the products and their information to forefront. Do not make your visitors go in circle in order to find the information of their favorite product. As said earlier, understand your visitor and think from their mind, not yours.
I have seen a lot of designers trying to make changes in the basic conventions of a website designing just to make their website look different. This idea will not work really well for every visitor because you are confusing them more. At times, you have to avoid experimenting and keep things simple and conventional. When a user visits your website, he should sense a familiarity and since users are quite used to conventions, they will find navigating through your website quite easy.
As mentioned earlier, users do not like confusing websites and if you are experimenting, you re forcing them to think which is highly disliked by them. Instead of understanding your website, they will leave it. One example would be keeping the navigation menu always above. Stick to basic principles of website usability and you will not regret it.
How to Use Eye Catching Fonts from Google’s Library
Once designers were limited to using system fonts in web design, which spawned a trend of creating text-based images and graphics. This technique may have made websites look better, but it introduced other problems. Webpages loaded slower and there was zero SEO value in using graphical headings. Along came changes to browsing that allowed font embedding, but this too was a cumbersome and inconsistent method of getting around Arial and Comic Sans.
Today, support for cloud fonts is almost a standard, to the joy of designers everywhere. While premium services such as Typotheque and Typekit let you take advantage of a huge selection of fonts, they are costly and not always practical. Google’s solution with Version 2 of their free online font libraryhas been to provide a high quality and dependable service for embedding fonts. Here are a few ways you can get the most out of using this fantastic resource. (updated from designzzz.com)
Allow your website content to drive your choice of font and choose appropriate styles, which suggest the qualities you want your design to communicate. Enter preview text into the font finder interface, and then proceed to fine-tune your search by selecting filters and setting attributes using the handy sliders in the left sidebar. If you have a hard time getting results, reduce the specifications by collapsing one of the attributes such as the “width” option.
Each font in the Google library has several different styles associated with it. If you plan to use the font as a heading, a heavier weight may grant a more powerful effect. Many fonts also include a bold or italic version that should be used in favor of the default typeface. These various styles are hidden in the default preview list, so you will need to click the “show all styles” link in the bottom right corner of the font’s preview box to see what it has to offer. Clicking “hide all styles” will collapse the preview.
Limit yourself to a small number of typefaces when building your font combinations – three or less should do. Choose fonts that share similar attributes or consider using different weights or styles of the same font.However, go for a bit of contrast; if your fonts are too similar with only a small variation, it can make your typography look confused. The goal is to highlight a distinct style.
Some Excellent combinations put together by designer Josh Johnson are:
Once you have found the perfect font combination, selected your styles, and added them to your collection, clicking the “Review” button will bring you into the Test Drive interface where you can view your font selections in action and make any necessary adjustments.
When you add fonts to your collection, a blue bar will appear at the bottom of the screen with a big“Use” button. Select the styles you wish to include and note the page load meter on the right side. The more styles and fonts you select, the heavier the page load will be, and including individual fonts and font styles will make the load even worse. With version 2 of Google Fonts, the code snippet generated for you will combine multiple fonts and selected styles into one stylesheet for you, which is preferable to linking each one-by-one.
To understand how this method works, each font is separated by a pipe. Specific styles are appended to the font name by a colon and separated using commas. Spaces in the font names must be replaced with a plus.
Always place your link code before any “<script>” tags in your head to allow Internet Explorer to detect them properly. As an alternative, you can opt to use @import in your CSS document instead:
/* Google Fonts Import -------------------------- */ @import url(http://fonts.googleapis.com/css?family=Droid+Sans: regular,bold|Droid+Sarif:regular,italic,bold,bolditalic&subset=latin);
A common complaint with embedded fonts viewed in Windows is the jagged edges that plague some font styles. This is a serious problem for designs that use extremely light or thin fonts, where jagged edges completely ruin the font’s elegance or readability. Thankfully, there is a solution in the CSS text:shadow property. By setting a 1pixel transparency, browsers that support this rule will display the text with a light anti-aliasing effect. Add the property to any class where one of your Google fonts is specified, or use it in your universal declarations to apply it to the whole site.
text-shadow: 0 0 1px transparent;
If you are like thousands of designers, you probably use WordPress for your own portfolio or as a platform for client sites. The “WP Google Fonts” plugin uses the Google fonts API to provide a slick interface for selecting up to 6 fonts and associating them with specific elements. There is a custom CSS box for assigning fonts to special classes as well. This is an excellent worry-freealternative to embedding fonts or font options directly into the theme; frequent updates to the plugin ensure changes to the Google API will not affect your website.
+++Updated from designzzz.com
Want a fun way to liven up a headline? Stick it on a banner. This is another trend that is quite popular in web design today, you can find this idea all over the web.
As you can see in the image above, there are three main variations of your typical banner, all of which can be used in conjunction across a site. The first is a freestanding banner, which sort of folds back on itself on the ends.
If you’re wondering how to make the 3D effect, it couldn’t be easier. First, choose a color for the main or front part of the banner. Then choose a slightly darker shade for the side portions. Finally, create a tiny triangle and make it yet another shade darker. The three pieces are shown separated and then together in the image below.
The other two versions of the banner are a variation on this theme. This time though, the idea is to wrap the banner around some content. You can make the banner peek out from one side as with the second example or wrap around the full object as with the third example.
The website WPCoder actually uses all three variations of the banner in its design. Here are a few screenshots of some of the elements.
These have been created with images but it’s becoming quite common to achieve a similar effect using only HTML5 and CSS3. Check out this tutorial from WebDesignTuts for a walkthrough of this process.
1. Use shapes and shape layers as often as possible. You can resize then easily without quality loss, good for later changes.
2. Blending options are your friend. Double click a shape layer and you can do all sorts of effects: gradients, shadows, color overlay. They’re much easier to make changes to later on when a client says: “Can I see that gradient in blue?”
3. Use Crisp antialiasing on your font layers. It’s much closer to browser rendering. Keep in mind that most modern operating systems don’t smooth fonts below 11 or 12 pixels, so for smaller fonts, you’re probably better off setting it to None.
4. Use web safe fonts on any parts of the site with live text. You might be able to wow the client by using Verlag for the body text of your mockup, but you’ll have a rough time turning that into CSS/XHTML. While logos and other static text can be replaced with images fairly easily, you should use those web safe fonts as often as possible. Search engines index browser text, screen readers can read browser text for visually impaired folks and browser text is much easier to translate. (And if you’ve “just gotta have that font”, take a look at sIFR. Use sparingly.)
5. Use nested layers to duplicate the DOM. If that went over your head, let me rephrase: use your layer folders to recreate the general structure of your site. Put all of the images for the header in a header folder. Inside that, make a folder for the logo, a folder for the main navigation, a folder for search field, etc. Not only does this make moving stuff around easy, it helps things stay organized and think in terms of content. (Keep in mind, Photoshop CS3 only allows layers to be nested 5 deep.)
6. Use different layers for multiple versions of the same page. If you do multiple page comps, usually just the main content changes while the header, footer and sidebar often stay the same. So using the folder structure in Photoshop, you could create folders like:
And then just toggle their visibility when saving multiple drafts.
7. Save the finished product as a JPEG at 100% quality. You can usually get away with 80%, but why skimp when sending a screenshot to a client for approval?
8. Get your width right. If your target screen resolution is 800px, your mockup shouldn’t be any wider than 760px. If your targeting 1024px, your mockup should probably not exceed 960px. A very large number of people these days are using 1024px or higher. Nathan Smith’s 960 Grid System has a good Photoshop template to start with.
9. When it comes to mocking up forms, don’t reinvent the wheel. The Designer’s Toolbox has a huge collection of form elements from different browsers and operating systems you can use, free of charge.
10. Use all of the resources you can find. Here are some I’ve found useful:
Fluid/responsive design helps to resolve the design problems associated with the different resolutions and devices (desktop, laptop, tablet, and mobile). Here is a list of responsive sites that are nicely done into two categories:
The design adapts based on the viewport width.