Aug 04

Can anybody guess why buggy software’s from Microsoft are huge success? Or Why Apple proprietary products are tremendous success? What’s the common factor between both these success stories? Highly effective User Interface!

To design a simple UI is not a rocket science, but it is a spoon full of engineering and whole lot of art. Anyone can create a decent UI, but to define and design effective user interface takes creative thinking, analytical aptitude, research, time and above all an ability to put one’s self into end user’s shoe. Most of the user interfaces fail to attract the end users because of one of the ingredients missing above.

Designing an effective UI is never easy, but it easy to spot a bad one. Just find frustrated user rolling their eyes while using the system. That’s bad UI! UI is one of the most critical factors that makes or breaks the system. It is never a power point presentation, but it is physical translation of user’s expectations from “computer”.

There are different factors that should be considered to make the UI more effective.

Logical and Physical Arrangement: The screen should be structured and the fields and controls have to be arranged logically according to the flow of process. So that the user can navigate through the fields easily and the entry process is optimal and effective.

Right Information: The information provided should be “just” right. There should be not too much information nor too less information. Simple to use and easy to understand.

Aesthetics: The screen design should be visually appealing and easy on user’s eyes.

Consistency: The design should be consistent at all the places, so that user understands the flow and knows what to expect. It should not be work of Picasso at one place and that of Leonardo de Vinci at others!

Navigation: The navigation should be logical and inline with process flow. User should not need to play hop scotch while using the screen.

Thus UI design is THE most important part of designing any system and must not be underestimated.

This just a beginning! Lot more to come…Stay Tuned!

Tagged with:
Jul 01

Web designing is an erratic industry. Quite like other expressions of art, there has been constant and stunning evolution that has taken place so far. It was just recreation for enthusiasts back in the time, but now has become a mature rich medium with strong aesthetic and functional appeal. With the influence of 2009 there are some astonishing web trends hitting the deck now in 2010.

Web designing trends change every year due to a number of factors such as advancements in technology and changes in user behavior. It is important to do away with old web design principles and adopt new ones. New trends help web design to evolve with time and improve the creativity of websites

Latest web design trends always tempt the designer to try new design styles. Being web designer, one should stay abreast of new challenges and opportunities. Let’s take an inside look what’s being cooked in 2010.

  1. Huge and jazzy Illustrations
  2. Huge illustrations are close relative to the oversized logo/ header; it does much the same thing. It creates a visual impact that the visitor won’t forget easily. Unlike the oversized header from above, these are not part of the site’s branding. Instead, these images catch the visitor into your site by creating immersive experience for them. In 2010, web designers are finding themselves more versed using these big statements in their design to beacon and lit-up the site’s tone as today visitors want to read less and see more.

    Not only headers, Icons are being used more often for conveying the meaning of text content or website sections to create simple visual cues.

  3. Rich and Gigantic Typography
  4. Arial, Verdana and Tahoma are not the only fonts dominating the web today. Instead, strong and vivid typography is the current trend. Today, designers are blending huge and crisp typography with catchy visual design to communicate the most important messages of their websites. With technologies like sIFR and Typekit designers’ work became even easier to enable some typography richness. Another good choice is using the CSS @FONT-FACE implementation which is supported by most of the leading browsers today.

  5. Interactive Interface with Single Page Layout
  6. Most of designers prefer clean and crisp illustrations to give distinctive feel that can’t be replicated by photography or simple clip art. The result is a wide range of professionally illustrated designs that are engaging and inviting. Effective one-page layouts hide any web sections that are not a priority. If a visitor wants to see one of those elements, they can click to uncover it. This is much more effective than leaving everything visible, which would make the page complicated and overwhelming. Likewise, the concept behind one-page layouts makes additional pages unnecessary. With emerging powerful JavaScript libraries and faster connections, many websites now have little need for several pages. Designers can easily fit information on one page, without bothering the visitor with a hierarchy. These one page layouts are the web designs that incorporate best latest web design trends. Usually they are used for portfolios.

  7. Out of the box patterns
  8. While out-of-the-box-designs on the web aren’t particularly a new thing, they are becoming more prevalent in the actual designs of the sites themselves, rather than being used sparingly. Overall creative approach is often more important and more memorable than the attention to details.
    When it comes to creativity, designers need to be careful, because a new creative approach can literally break a website. Often, it’s a good idea to find a compromise between a creative approach and a classic, traditional design, and balance between both.
    Designers, open your mind to the possibilities of exceptional design for your site !!

  9. Newspaper and Magazine Layouts
  10. This trend is strong contributor in blogosphere. Mostly, corporate websites hardly consider this area, but bloggers – they just seem to love this trend. Numerous WordPress themes are available in the market leveraging use of both newspaper and magazine layouts for blogs. This trend is blooming rapidly in 2010. Now-a-days, people are migrating from traditional media like newspapers and magazines to web, and, it is consequently affecting other web sites and web in general. Organizing the content into a single page is, however, is a bitter pill to swallow, but it catching up the designers and users attention.

  11. 3D Elements & 3D Text Effects
  12. 3D effects will puff up in 2010. 3D type effects and also 3D elements within the web page are gaining popularity. Three dimensional shapes, wrapping elements, and tilted edges will give visitors the feeling of space and depth. 2-D is out – 3-D is in.

  13. Sketches/ Hand drawn designs
  14. Using Sketch- based designs can really add a personal touch to your Web site, inviting a sense of playfulness and wonder in your visitor.

    Sketching or Hand-drawn designs are turning out to be the best way to give simple, unique and personalized looks to your web copy/blog. Not only hand drawn images, handwriting style is also gaining much popularity.

  15. Modal/Light Boxes
  16. Modal Box is a way to bring up additional information and imagery about a specific item without taking user away from the page. It presents the additional information until the visitor closes it, bringing the visitor straight back where they left. Modal windows are often presented in a very subtle way: they are often semi-transparent and have a “Close” button.
    Modal boxes are becoming great solution for designers due to their ease of usability.

Wrapping up

Modern Web design is flamboyant, appealing and more user-friendly. We’re surpassing a charismatic use of visual design era for the sake of aesthetics and a pleasing user experience. Traditional trend from print design are rapidly being applied to the Web. Horizontal and even diagonal orientations carry out a fresh perspective to the flat 2-D designs we’ve seen for years (with their text enriched, flashy catchy pages). These developments are a sign of the upcoming era of Web design, in which designers can use new tools and techniques to their utmost potential. In future, these trend is supposed to rock the boat of web design in many ways!!

Tagged with:
Jun 30

Introduction
To secure your website you can set the security permissions on individual web pages, web services and sub directories. ASP.NET supports this requirement with declarative authorization rules. These rules are defined in the web.config file. The rules you define in the web.config file, are acted upon by the URL Authorization Module, a specific HTTP module. This module examines the defined rules and checks each request to make sure user can’t access resources which are restricted from the users.

Following diagram describe the workflow of the FormsAuthenticationModule, and the UrlAuthorizationModule when an unauthorized request arrives. In particular, diagram shows a request by an anonymous visitor for ProtectedPage.aspx, which is a page that denies access to anonymous users. Since the visitor is anonymous, the UrlAuthorizationModule aborts the request and returns an HTTP 401 Unauthorized status. The FormsAuthenticationModule then converts the 401 status into a 302 Redirect to login page. After the user is authenticated via the login page, he is redirected to ProtectedPage.aspx. This time the FormsAuthenticationModule identifies the user based on his authentication ticket. Now that the visitor is authenticated, the UrlAuthorizationModule permits access to the page.

Authorization Rules:
Authorization determines whether an identity should be granted access to a specific resource.Authorization rules are defined in the <authorization>element in the <system.web> section of the web.config file apply to all of the ASP.NET resources in that directory and its sub directories (until otherwise overridden by another Web.config file). There are two types of rules exists: allow and deny. You can allow or deny users, roles (group of users).You can add verbs attribute to create a rule that applies only to specific type of HTTP requests (GET, POST, HEAD and Debug).
The basic structure of the authorization is as follows:

You can add as many allow and deny rules as you want.
To deny access to all anonymous users, you can use a deny rules like this:

To allow access to all users you can use:

The question mark (?) is a wildcard that represents all users with unknown identities.  The asterisk(*) represents all users including authenticated and anonymous users.You can add more than one rule in authorization section.
Consider the following rule:

This rule will allow all users to access the resources. ASP.NET will evaluate first rule which allow access to all usres and it will not evaluate the second rule since we already have provided access to all users in the first line. However reversing the lines of rules the following authorization rule will deny all anonymous users and allow access to all other users.

Controlling access to specific users:
You can grant access on the base of user accounts.
Let us consider the following authorization rule.

This rule will allow access to only listed users i.e amit, amitkumar, sandeep
And restrict all other users, even if they are authenticated.
Here is an another example:

In this rule the listed users i.e amit,amitkumar,sandeep are strictly restricted to allow access.Let us take another example.

In the above example users amit,amitkumar are denied. But it does not affect the user sandeep, because asp.net matches the rule that allows all users and doesn’t read any further

Controlling access to specific sub directories:
You can set authorization rules to specific directories. You just need to add the web.config file in the sub directory with the authorization rules as per your requirement.
Remember that when you add the web.config file in the sub directories, it should not contain any of the application-specific settings. In fact it should contain only the authorization information as shown below:

When using authorization rules to specific directories, ASP.NET still reads the authorization rules from the parent directory, but it applies the subdirectory rules first.
Let us clear this point using an example.
You have define a rule in the root virtual directory as below:

And the sub directory contains the rule as:

In this case user amitkumar will be able to access any resource in the root directory but no resources in the sub directories.

If you reverse these rules then user amitkumar will be able to access the resources of sub directories but will not be able to access resources of the root directory.

ASP.NET allows unlimited hierarchy of sub directories and authorization rules to make the real life problems very easy.

Controlling access to specified files:
Setting file access permissions by directory is the cleanest and easiest approach. However, you can also restrict specific files by adding <location>tags in the web.config file.
Consider the following:


In the above setting all users are restricted to access the restrictedPage.aspx page.

Controlling access for specific roles:
To make the website security easier users are grouped into the categories called roles. Suppose you need to manage an enterprise applications that supports thousands of users, it will be difficult to apply restrictions on thousands of users individually. So users are grouped into roles. So the rules applied to the specific role will be applicable to all the users with in the role. You can create as many roles as you want.
When you use role based authorization,  you must enable roleManager in the web.config file in the <system.web> section.


For example the following authorization rules allows access to two users amit and amitkumar and two roles admin and management and all other users are denied.


ASP.NET makes it easy to define user-based authorization rules. With just a bit of markup in Web.config, specific web pages or entire directories can be locked down so that they are only accessible to a specified subset of users. Page-level functionality can be turned on or off based on the currently logged in user through programmatic and declarative means.

Tagged with:
preload preload preload