Web Design « JustClick

Posts Tagged ‘Web Design’

6 Important Points in Designing a Website

Wednesday, November 25th, 2009

I think design covers so much more than the aesthetic. Design is fundamentally more. Design is usability. It is Information Architecture. It is Accessibility. This is all design.

- Mark Boulton

1. Speed, speed, speed

In the recent interview with google's own Matt Cutts, he says "A lot of people within Google think that the web should be fast, it should be a good experience; and so it’s sort of fair to say if you’re a fast site, maybe you should get a little bit of a bonus. Or maybe if you have a really awfully slow site, users don’t want that as much." And the controversy goes on and on...

In my opinion, a website does not need to be fast but it needs to be responsive. This does not translate to websites with flash components, repetitive loading screen and animation over pages will become annoying.

2. It's all about experience

Conventions are your friends

- Steve Krug, author of Don't Make Me Think

Breaking conventions for the sake of breaking the conventions are not innovation. And if you can't innovate, there's nothing wrong with following the current. Walking on familiar grounds makes your user feels safer.

3. Minimize learning curve

If one is presented a page like this, wonder what should one do?

4. KISS (Keep It Simple, Stupid)

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

- Antoine de Saint-Exupery

5. Don't rely on graphics

Not all pictures says a thousand words, in fact most stock pictures says nothing at all. Here are the top 3 photo search result of 'web design' from iStockPhoto. Is it saying a thousand words?

istockphoto_7459744-unique-website

What about full flash site? Well aside from SEO problem, flash sites doesn't have a good user experience, users can't jumped directly into a certain page. And doesn't allow them to share links, pictures, or articles with friends. I know that these can be done in flash, but the harsh reality is most flash designers don't (or don't know how to) do it.

6. Graceful downgrade

Since the early days of websites, we have seen a warning text in the footer of sites, 'best viewed in 1024 x 768 screen resolution,' it doesn't mean that screen with resolution 800 x 600 is SOL. These days, in my opinion, it's okay not to support IE6 if your site requires the alpha transparency from PNG pictures, or html5. You should have a fair warning for IE6 users.

Adapted from 6 Things Video Games Can Teach Us About Web Usability

Tags: Flash, google, seo, user experience, Web Design
Posted in website design | 3 Comments »

If Architects Had to Work Like Web Designers

Monday, October 12th, 2009

Please design and build me a house. I am not quite sure of what I need, so you should use your discretion. My house should have somewhere between two and forty-five bedrooms. Just make sure the plans are such that the bedrooms can be easily added or deleted. When you bring the blueprints to me, I will make the final decision of what I want. Also, bring me the cost breakdown for each configuration so that I can arbitrarily pick one.

Keep in mind that the house I ultimately choose must cost less than the one I am currently living in. Make sure, however, that you correct all the deficiencies that exist in my current house (the floor of my kitchen vibrates when I walk across it, and the walls don't have nearly enough insulation in them).

As you design, also keep in mind that I want to keep yearly maintenance costs as low as possible. This should mean the incorporation of extra-cost features like aluminum, vinyl, or composite siding. (If you choose not to specify aluminum, be prepared to explain your decision in detail.)

Please take care that modern design practices and the latest materials are used in construction of the house, as I want it to be a showplace for the most up-to-date ideas and methods. Be alerted, however, that kitchen should be designed to accommodate, among other things, my 1952 Gibson refrigerator.

To insure that you are building the correct house for our entire family, make certain that you contact each of our children, and also our in-laws. My mother-in-law will have very strong feelings about how the house should be designed, since she visits us at least once a year.

Make sure that you weigh all of these options carefully and come to the right decision. I, however, retain the right to overrule any choices that you make.

Please don't bother me with small details right now. Your job is to develop the overall plans for the house: Get the big picture. At this time, for example, it is not appropriate to be choosing the color of the carpet. However, keep in mind that my wife likes blue.

Also, do not worry at this time about acquiring the resources to build the house itself. Your first priority is to develop detailed plans and specifications. Once I approve these plans, however, I would expect the house to be under roof within 48 hours.

While you are designing this house specifically for me, keep in mind that sooner or later I will have to sell it to someone else. It therefore should have appeal to a wide variety of potential buyers.

Please make sure before you finalize the plans that there is a consensus of the population in my area that they like the features this house has. I advise you to run up and look at my neighbor's house that he constructed last year. We like it a great deal. It has many features that we would also like in our new home, particularly the 75-foot swimming pool. With careful engineering, I believe that you can design this into our new house without impacting the final cost.

Please prepare a complete set of blueprints. It is not necessary at this time to do the real design, since they will be used only for construction bids. Be advised, however, that you will be held accountable for any increase of construction costs as a result of later design changes.

You must be thrilled to be working on as an interesting project as this! To be able to use the latest techniques and materials and to be given such freedom in your designs is something that can't happen very often.

Contact me as soon as possible with your complete ideas and plans.

PS: My wife has just told me that she disagrees with many of the instructions I've given you in this letter. As architect, it is your responsibility to resolve these differences. I have tried in the past and have been unable to accomplish this. If you can't handle this responsibility, I will have to find another architect.

PPS: Perhaps what I need is not a house at all, but a travel trailer. Please advise me as soon as possible if this is the case.

(via Digital Survivors)

Tags: architect, Web Design
Posted in website design | No Comments »

Seven jQuery Plugins That Let You Do Cool Stuff With Images

Monday, September 14th, 2009

In a recent post, I wrote about jQuery plugins that let you easily add a stylish galleries and slideshows to your site. Today, we have six plugins that let you add some cool functionality and interesting effects to images. As a designer, I found plugins like this to be so useful because I would never be able to write or develop functionality like this myself. So thank you generous developer community for sharing all this great work. And now on to the plugins…

jParallax
jParallax turns a selected element into a ‘window.’ Through this window you can see a number of absolutely positioned layers. The layers move in response to the mouse, giving a parallax effect. The parallax effect was utilized on the popular Silverback application website last year.

To download the plugin and see working demos, visit the plugin website.

parallax

jQuery 360 Virtual Tour

This is a really nice plugin that allows you to add a panoramic image to your site with additional interactivity. Users can pan around the image and also click on hotspots for a closer view.

Download plugin.

View Demo.

Illuminated letters is also made by the Open Studio. They created the 360 Virtual Tour plugin.

This plugin lets you add a decorative drop cap to your text. The drop caps are images provided in a zip file with the plugin. I imagine it would be reasonably straightforward to replace the provided images with your own letter images if you wanted to use a different style.

Download and view working examples on the website. Just to mention, most of the info on this page is in French.

jCrop lets users choose part of a large image and crop it to produce a second smaller image. This would be ideal for situations such as creating an avatar or thumbnail image for example.

Demos here.

Download here.

jcrop

Image Annotation lets you choose hotspots on an image where you can add tooltips or notes which display with a mouse rollover. You’ve probably seen this effect numerous times if you use Flickr.

Demo here.

Download here.

jCaption plugin lets you easily add a caption to an image. As simple as that.
Demo here.

Download here.

Maybe not one you’ll use too often but it could be a fun feature on a certain type of site, maybe for children, jQPuzzle lets you turn an image into a sliding puzzle.
Demo here.

Download here.

Have you any image related jQuery plugins that you love? Please feel free to share them.