Business Card Challenge

Posted in 1. Comments Off on Business Card Challenge

Best Book Covers 2010

10 of 2010′s Best Book Cover Designs Thumbnail

Atticus Waller, who is an accomplished graphic designer, recently said the following about book cover design:

“When designing a book cover, I have six ideal goals: 1) A cover should communicate the book’s content, be that the story or simply the mood. Reading the book first is important. 2) The graphics should convey only one conceptual statement about the book, which should nest neatly with the imagery. Avoid graphics with no conceptual reason for being. 3) Cover text should be cohesively incorporated into the imagery. 4) The cover should attract those who’ll enjoy the book once drawn in. 5) The cover should stand out amongst many books from across a room. 6) The cover should satisfy the client I’m designing for and the author of the book.”

Publishers know that a beautifully designed cover will lead to higher sales. This is the era of the big box bookstore, where millions of books compete with each other on the shelves to catch your eye. Some say that the art of the book cover is a dying one, because of the huge popularity growth of e-readers like the Kindle and the iPad. Nevertheless, new book cover art in 2010 was in top form. Check out ten of our favorites this year.

The Girl Who Fell From The Sky

The Imperfectionists

The Healing of America

The Minds Eye

The Shallows

super sad true love story

ransom

five days apart

mr peanut

you had me at woof

+++pixellogo.com

Posted in Hot Tips. Comments Off on Best Book Covers 2010

Website Usability

Things a Web Designer Should Know About Website Usability

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:

Who Will Be Visiting Your Website

Things a Web Designer Should Know About Website Usability

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 flyersbrochurespostcardsbusiness cardspostersbookletsrack 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.

Do Not Leave Your Visitors Confused and Unanswered

Things a Web Designer Should Know About Website Usability

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.

Less Thinking and More Scanning

Things a Web Designer Should Know About Website Usability

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.

Knowing and Understanding Your Ideal Visitor

Things a Web Designer Should Know About Website Usability

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.

Users Love the Feeling of Being Familiar

Things a Web Designer Should Know About Website Usability

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.

Posted in 1. Comments Off on Website Usability

Google Fonts Tutorial

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)

Google Web Fonts

Find the perfect font

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.

Choose the Right Style

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.

Choose Harmonic Combinations

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:

  • Lobster & Cabin
  • Allerta & Crimson
  • Arvo & PT Sans
  • Corbin & Nobile
  • Ubuntu & Vollkorn

Test Drive

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.

Use one Header Link for Multiple Fonts and Styles

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.

Example: http://fonts.googleapis.com/css?family=Gentium+Book+Basic:700,700italic|Ubuntu:400,700italic

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);

Add a Transparent Shadow for Text Smoothing

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;

Google Fonts for WordPress

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

Posted in 1. Comments Off on Google Fonts Tutorial

Liven up design

Headline Banners

screenshot

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.

screenshot

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.

screenshot

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.

Posted in 1. Leave a Comment »

PS tips for creating mock ups

10 Tips For Creating Website Mockups In Photoshop

Things that you may find helpful when designing comps in PS:

1. Use shapes and shape layers as often as possible. You can resize then easily without quality loss, good for later changes.

Use Shape Layers

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?”

Blending Options FTW!

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.

Antialiasing in Photoshop

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.)

Nested Layers To Duplicate The DOM

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:

  • content – front page
  • content – contact form
  • content – entry

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:

  1. ColourLovers: Colors, Palettes and Patterns
  2. Smashing Magazine’s Freebie Icons, Buttons and Templates
  3. Deziner Folio: 131 Beautiful Photoshop Styles
  4. Deziner Folio: 130 Beautiful Photoshop Gradients
  5. Stylegala’s Bullet Madness
  6. Vitaly Friedman’s 25 Best Free Quality Fonts
  7. FamFamFam’s Silk Icons
  8. Feed Icons (in every imaginable format)
+++Thanks to plasticmind.com for contents
Posted in 1. Leave a Comment »

Fluid/responsive Design

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:

Adaptive Design

The design adapts based on the viewport width.

iA

Information Architects is one of my favorite minimal sites. It is simply beautiful. I admire the fact that such a beautiful design only uses two colors (black and red) with just web safe fonts, no texture images, no fancy Javascript effects or custom fonts. Transforming the navigation list menus into dropdown menus on smaller formats is very smart because it conserves a lot of space in the header.

screenshot

Head London

Although the Head London site is not fluid,  it did a pretty good job on the responsive layouts. The layout is consistently put together on each viewport layout. Most responsive sites use max-width to create fluid images, but the images on Head is masked at full size.

screenshot

Food Sense

This flows from detailed 2-column layout with sidebar to 1-column layout. As the design gets smaller, it gets more minimal. The slider has 2 line of navigation text at the bottom on the large format, it then changes from two lines of text to one line, the text then disappears on the small format. The navigation menu has icons on the large formats. The menu icons disppear on the smaller formats.

screenshot

Fork CMS

Go to the Fork CMS site, resize your browser window. Notice the parallax scrolling effect on the water waves? That is fun. However, hiding the feature icons as it goes smaller because readers with small viewport will lose some of those information.

screenshot

London and Partners

The responsive layouts are very well planned – from a large format 4-column layout to a small 1-column layout. Most responsive sites hide certain content as it goes smaller, but this site keeps it all. It shows that even content-rich site can be responsive.

screenshot

Fluid & Responsive

The following sites not only respond base on the viewport width, but the layouts and its content are fluid/elastic.

Bitfoundry

The resizable ribbon was a background image using background-size property, but it turned out that is an tag with z-index applied. This is a nice trick to make resizable background image because CCS3 background-size is not cross browser yet.

screenshot

Ethan Marcotte

Ethan Marcotte, being the founder of responsive design and author of Responsive Web Design book, his site of course is responsive. Instead of using max-width to make the images responsive, Ethan uses some CSS tricks to clip the images at original size.

screenshot

Paul Robert Lloyd

On Paul Robert Lloyd’s site, not only the layout is responsive, but the font size is also responsive. On larger viewport, the font size is slightly bigger which provides more comfortable reading on large monitors. This is a good usability touch.

screenshot

10K Apart

If you have a large display, maximize your browser’s window and check out 10K Apart. Then resize your browser’s window and watch the header images scrolls in opposite direction.

screenshot

Forefathers Group

The Forefathers Group has great attention to details and it flows nicely across all viewport sizes. The overall design is very graphical. However, on the small version, it seems a lot of graphic elements were removed. It would be nice to preserve some of the graphic elements using background-size property.

screenshot

Colbow Design

Unlike the Forefathers Group site shown above, Colbow Design preserves all the graphic details on all viewport layouts. Colbow Design creatively uses tiled background images (header image, city illustration and footer image) to deliver a consistent appearance throughout all resolutions.

screenshot

CSS Tricks

Beside of responsive design, CSS Tricks adds some transition effects to make the flow more interesting. Resize your browser window and watch the elements transit from one point to another.

screenshot

Electric Pulp

I like how Electric Pulp responds from a 3-column layout to 2-column and then a single column. However, the resizable header image doesn’t work that well on smaller versions. The text becomes illegible.

screenshot
Posted in 1. Leave a Comment »