Oct 11
Jigar PanchalDesign, Web Dev, Work, Yahoo Store photoshop, quality in design, web design
Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. Well, I think that there’s quite a few ways to spot quality within web designs. Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style.
I’ve put together a few pointers, and collected some examples to explain just how I look for quality within a website design.
01. Spacing
One of the main things that I look for within a good website design is clever use of spacing with design elements. Paying close attention to how certain things are spaced out and lined up can really make a difference to the overall appearance and sense of quality of your design.
I think the key to getting your spacing right is to look at all of the elements within your design. Looking at the bigger picture really can help you get a good idea of how best to space your elements. Sometimes zooming out and taking a different look at your designs can be a great help.
Examples of Excellent Spacing
Great Spacing on the Good.is Website
As you can see here, there is a very clean and open feel to the content here. This is completely down to the designer allowing a good amount of space around the text & images.
A very well spaced out Digital Mash Website
Having well spaced out elements can make them a lot more attractive, and a lot more clickable. Digital Mash is a great example of a very welcoming website.
More
Oct 11
Jigar PanchalDesign Art, Design, Interprete dDesign
The subject of what separates art and design is convoluted and has been debated for a long time.
Artists and designers both create visual compositions using a shared knowledge base, but their reasons for doing so are entirely different.
Some designers consider themselves artists, but few artists consider themselves designers.
So what exactly is the difference between art and design? In this post, we’ll examine and compare some of the core principles of each craft.
This is a subject that people have strong opinions about, and I’m looking forward to reading the various points of view in the comments.
This post isn’t a definitive guide, but rather the starting point for a conversation, so let’s be open-minded!
Good Art Inspires. Good Design Motivates.
Perhaps the most fundamental difference between art and design that we can all agree on is their purposes.
Typically, the process of creating a work of art starts with nothing, a blank canvas. A work of art stems from a view or opinion or feeling that the artist holds within him or herself.
They create the art to share that feeling with others, to allow the viewers to relate to it, learn from it or be inspired by it.
The most renowned (and successful) works of art today are those that establish the strongest emotional bond between the artist and their audience.
By contrast, when a designer sets out to create a new piece, they almost always have a fixed starting point, whether a message, an image, an idea or an action.
The designer’s job isn’t to invent something new, but to communicate something that already exists, for a purpose.
That purpose is almost always to motivate the audience to do something: buy a product, use a service, visit a location, learn certain information. The most successful designs are those that most effectively communicate their message and motivate their consumers to carry out a task.
Good Art Is Interpreted. Good Design Is Understood.
Another difference between art and design is how the messages of each are interpreted by their respective audiences.
Although an artist sets out to convey a viewpoint or emotion, that is not to say that the viewpoint or emotion has a single meaning.
Art connects with people in different ways, because it’s interpreted differently.
Da Vinci’s Mona Lisa has been interpreted and discussed for many years. Just why is she smiling? Scientists say it’s an illusion created by your peripheral vision. Romantics say she is in love. Skeptics say there is no reason. None of them are wrong.
Design is the very opposite. Many will say that if a design can be “interpreted” at all, it has failed in its purpose.
The fundamental purpose of design is to communicate a message and motivate the viewer to do something.
If your design communicates a message other than the one you intended, and your viewer goes and does something based on that other message, then it has not met its requirement. With a good piece of design, the designer’s exact message is understood by the viewer.
Good Art Is a Taste. Good Design Is an Opinion.
Art is judged by opinion, and opinion is governed by taste.
To a forward-thinking modern art enthusiast, Tracey Emin’s piece “My Bed”, which was shortlisted for the Turner Prize in 1999, may be the height of artistic expression.
To a follower of more traditional art, it may be an insult to the medium. This goes back to our point about interpretation, but taste is more about people’s particular likes and dislikes rather than the message they take away from a piece.
Design has an element of taste, but the difference between good and bad design is largely a matter of opinion.
A good piece of design can still be successful without being to your taste. If it accomplishes its objective of being understood and motivates people to do something, then whether it’s good or not is a matter of opinion.
We could go on discussing this particular point, but hopefully the underlying principle is clear.
Good Art Is a Talent. Good Design Is a Skill.
What about the creator’s abilities?
More often than not, an artist has natural ability. Of course, from a young age, the artist grows up drawing, painting, sculpting and developing their abilities.
But the true value of an artist is in the talent (or natural ability) they are born with. There is some overlap here: good artists certainly have skill, but artistic skill without talent is, arguably, worthless.
Design, though, is really a skill that is taught and learned. You do not have to be a great artist to be a great designer; you just have to be able to achieve the objectives of design.
Some of the most respected designers in the world are best known for their minimalist styles. They don’t use much color or texture, but they pay great attention to size, positioning, and spacing, all of which can be learned without innate talent.
Good Art Sends a Different Message to Everyone. Good Design Sends the Same Message to Everyone.
This really falls under the second point about interpretation and understanding. But if you take only one thing away from this article, take this point.
Many designers consider themselves artists because they create something visually attractive, something they would be proud for people to hang on a wall and admire.
But a visual composition intended to accomplish a specific task or communicate a particular message, no matter how beautiful, is not art. It is a form of communication, simply a window to the message it contains.
Few artists call themselves designers because they seem to better understand the difference. Artists do not create their work to sell a product or promote a service. They create it solely as a means of self-expression, so that it can be viewed and appreciated by others. The message, if we can even call it that, is not a fact but a feeling.
What Do You Think?
Depending on how you look at it, the difference between art and design can be clear-cut or hazy. The two certainly overlap, but art is more personal, evoking strong reactions in those who connect with the subject.
Mar 28
Jigar PanchalDesign, Web Dev, Yahoo Store
When was the last time you called customer support because you were having problems checking out online? Probably never! Cart abandonment rate is at around 60%, and most of it happens before the user even begins the checkout process. Sometimes, convincing your customers to trust you is your biggest challenge.
There is no “Consumer Trust for Dummies,” but as eCommerce designers, we need to focus on some fundamentals. The following topics may seem as obvious as walking into a seven-foot Wookie, but rest assured you will find plenty of websites with a mouth full of fur.
1. Paint Your Pictures At Home
If your core demographic is women between the ages 35 and 65 who have an annual income of $60,000+, you would treat them different than the 18- to 25-year-old male demographic. First and foremost in e-tail: forcing your visitor to think is a bad idea. When creativity stops being subjective and can be measured by a dollar amount, making sure you’re designing for the customer is a no-brainer.
Years ago, I had an SVP of DotCom tell my team, “You can go home if you want to paint pictures.” And for the rest of the day, I couldn’t wait to get there so that I could make sure the next morning his inbox was full of expletive material illegal in most counties. After calming down, I realized he was right. All along, what he was telling us was simply to design for the customer and not ourselves. This was a challenge for designers working in an eCommerce corporate atmosphere but a very important lesson to learn.
2. Good UX Is Like A Perfect Movie Score
Build brand loyalty to gain patient, forgiving customers for a lifetime. For instance, Apple’s customer loyalty exceeds all other brands with an unusual cult following. Apple lovers forgive the company when it makes mistakes and zealously defend the company’s products and reputation.
How do you make your customers trust you this much? The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you.
Like the perfect score to a film, a good user experience is unobtrusive and transparent to the consumer because “it just works.” The Apple model will not work for everyone, but I often find myself challenged with a W.W.J.D. moment. Ask, “What would Jobs do?” and then look at other websites for inspiration.
3. eCommerce UX Pitfalls To Avoid
Just because a website is usable, does not mean customers will use it. Usability and user experience are in the same family, but more often than not user experience is the forgotten child. There are key areas in which the two must co-exist. Below are suggestions for some areas where websites should spend as much, if not more time, on the user experience.
Product Detail page
The product detail (PD) page is where some retail websites drop the ball. Too much focus is put on the design and usability of the home page, and that effort does not continue through to the rest of the website. More of the user’s time is spent on the product detail page than any other. Here, you need to offer customers all of the information they are looking for but present it in an intelligent way as well.
A few recent trends on eCommerce websites are “no-click” alternate images and swatches. A user simply has to roll over an image, without clicking, to get immediate feedback. The same approach can be used to zoom in to the image. Other UX options for the PD page are smart fields that let users know they still have to perform a required action before proceeding, without getting a typical error message.
The Checkout Process
Much like the PD page, the checkout process is a critical piece that engages the customer on a somewhat intimate level. However, unlike the PD page, where customers want to spend time to make sure they want what they are looking at, the checkout process should have as few steps as possible. Too many steps and the customer feels trapped.
But too quick and they feel like they have lost control. For instance, asking for credit card information too soon will seem out of order and no doubt scare even the most seasoned online shopper into abandoning their cart. Hidden taxes and shipping costs will make them feel like you are trying to take advantage of them.
Security
Always making sure your customer knows that your website is secure and that their privacy will never be compromised goes back to the issue of trust. It does not take much effort to display a message telling your customers that they are safe in your hands; a footer link to your privacy policy is not always enough.
Page Weight
A page’s weight is determined by its file size, by adding up every image, every line of code and anything that gets loaded when the user first hits the page. Libraries such as Scriptaculous, jQuery, MooTools and even Flash Shared Objects are often forgotten, but they all add to a page’s “weight.”
Some fascinating things are on the horizon for developers related to user experience and page weight. One notable development as of late was the release of Safari 4 Beta, which has support for HTML 5 media tags, CSS animation and CSS effects. As more and more of these features become standard in browsers across the board, we can look forward to offering users a better experience by using features directly in the browser. More
Dec 21
Jigar PanchalCSS, Design
You don’t have to write the same CSS-code or (X)HTML-Markup over and over again. Whatever project you’re starting to work with, at some point you have to define classes and IDs you’ve already defined in your previous web-projects. To avoid unnecessary mistakes you might want to start not from a blank file, but from an almost “perfect” scratch. The latter might contain some basic definitions you’d write in your code anyway. However, once you’ve decided to create such a scratch, you need to make sure it is really bulletproof — besides, if the stylesheet also sets up optimal typographic rules and basic form styling you manage to kill two birds with one stone.
And this is where CSS Frameworks and CSS Reset are becoming important. Using them, you can get yourself a perfect default-stylesheet and markup, save your time and ensure the best quality of your code from the very beginning. But what are CSS Frameworks? And why do you need the Reset for?
Let’s take a look at the idea behind CSS Frameworks, their advantages and disadvantages, most popular CSS frameworks and dozens of default-stylesheets you can use designing a new web-site from scratch.
- This article partially covers tools and techniques which use Grids. You might want to make sure you get the idea behind the grid-based design approach — from our article Designing With Grid-Based Approach.
- You can find hundreds of CSS templates in our article Free CSS Layouts and Templates.
- Please notice that this article takes a closer look at CSS Frameworks, not at extensive server-side programming frameworks such as CakePHP and also not at Web Development Environments such as Coda or Dreamweaver.
What is a CSS Framework?
- A framework is a basic (usually abstract) conceptual structure which you can use as a “scratch” for your web-projects. For instance, instead of defining global reset, consistent baseline, typographic rules or basic styles for forms over and over again — every time you work on a new project — you can prepare a default-style once and reuse it in all your future projects. This is what you call a CSS Framework.
- CSS frameworks don’t have to be complex or large, they may contain a set of simple CSS-styles such as
- typography.css for basic typographic rules,
- grid.css for grid-based layouts or
- layout.css for general layouts,
- form.css for basic form styling,
- general.css for further general rules
and so on. In your code segmentation you can also go further, for instance: structure, typography, design presentation, specialist sections (e.g. menus, navigation), print, mobile web, tweaks (mostly old style browser hacks), browser specific workarounds (via IE conditional statement). “On the whole code segmentation in frameworks is handy to work with, but it can add some real load to a server with the extra http request per page view.” [Treading Lightly With CSS Frameworks, by Gary Barber]
- “[Framework is] a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.” [Framework For Designers, by Jeff Croft]
Advantages of CSS Frameworks
- You increase your productivity and avoid common mistakes.
If you develop several sites of the similar nature, an abstraction of CSS code can dramatically speed up your productivity, help you to avoid common mistakes and simplify the management of CSS code.
- You normalize your code/class base.
You have a common “default” CSS-code and (X)HTML-markup, so you always use the same IDs and class names in your projects. Code consistency throughout a number of projects makes it’s easier for you to maintain a web-site without digging into the source code of every project you’ve ever worked on — to understand how you’ve actually built the web-site. More
Nov 18
Jigar PanchalCSS, Design CSS, Gradient
Benefits
- This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
- It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
- You can use on any web fonts and the font size remains scalable.
How does this work?
The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.
The HTML markups
| <h1><span></span>CSS Gradient Text</h1> |
The CSS
The key point here is: h1 { position: relative } and h1 span { position: absolute }
h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
} |
That’s it! You are done. Click here to view my demo page.
Make it work on IE6
Since IE6 doesn’t render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag):
| <!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–> |
This is why we hate IE 6!
jQuery prepend version (for semantic lovers)
If you don’t want to have the empty <span> tag in the heading, you can use Javascript to prepend the <span> tag. Here is a sample using jQuery prepend method:
| <script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
//prepend span tag to H1
$(“h1″).prepend(“<span></span>”);
});
</script> |
More samples
Want to make Web 2.0 glossy text?
Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).
Pattern / Texture
You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!
Limitations and more…
- This trick is only suitable for solid background color elements. Your gradient color (PNG image) must be the same color as your background color.
- IE PNG hack is required if you want it to work on IE 6.
- If your gradient image is taller than the heading, the text will not be selectable.
Nov 05
Jigar PanchalCSS, Design, Links
Just found this useful baby!
http://www.cssdrive.com
Oct 05
Jigar PanchalDesign, Links, Web Dev, Work CSS Layouts
As a web-developer you don’t have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you’ll find many templates, which include basic (X)HTML/CSS-markup.
You can start from there, learning and exploring the possibilities of CSS and modifying templates for your exquisite taste. Below you’ll find a list of resources which offer free, gorgeous and valid CSS-based templates – usually with images and full layout structure, such as headers, navigation bars, content containers, sidebars and footers.
Usually developers require a link to the site where the template was downloaded from. So before using these templates it might be useful to take a look at the license agreement the developer provides. Links checked: June/19 2008.
(X)HTML- and CSS-Templates
Oct 05
Jigar PanchalDesign, Links, Web Dev Online Generators
One can discuss whether web-generators are useful or not. On the one hand, they don’t challenge our creativity, but on the other hand they make our life easier and save our precious time. However, it doesn’t matter really. What matters is that we use them if we have to solve some problem quickly and efficiently. We’ve taken a look at the most useful online-generators for web-development and listed them below. Links checked: May/10 2008 – screenshots added.
css generators
More
Older Entries
Twitter
Facebook
Flickr
RSS
Recent Comments